jQuery Audio:如何允许重叠声音?

时间:2016-11-26 19:57:47

标签: javascript jquery html css audio

http://codepen.io/JTBennett/pen/vyJmBK (下面的片段)

嗨 - 只是想让声音与他们自己重叠多次,而不是等待音频文件完成。

弦乐声音彼此重叠很好,但我不知道如何让相同的声音重叠 - 如果我按E6弦三次,它在第一声之后不会触发任何声音单击直到声音结束。



$Questions['Question1']

$("#string-E1")
.mousedown(function() {
E1.play();
});
$("#string-B2")
.mousedown(function() {
B2.play();
});
$("#string-G3")
.mousedown(function() {
G3.play();
});
$("#string-D4")
.mousedown(function() {
D4.play();
});
$("#string-A5")
.mousedown(function() {
A5.play();
});
$("#string-E6")
.mousedown(function() {
E6.play();
});

body {margin:0;padding:0;}


.string {width:100%;text-align:center;border-top:2px #000 solid;border-bottom:2px #000 solid;margin:10px 0;background:#ccc;cursor:default;}
.string:hover {border-top:2px #f00 solid;border-bottom:2px #f00 solid;box-shadow:2px 0px 2px #666;}
.string:active {border-top:2px #fff solid;border-bottom:2px #fff solid;box-shadow:2px 0px 2px #666 inset;}




*编辑:guitar tuner app is located here的最终版本。

1 个答案:

答案 0 :(得分:1)

我看到的唯一解决方案是创建音频节点的新克隆并播放它。这样,当前播放的音频节点将保持不变,新的节点将重叠。

https://jsfiddle.net/cw8f67wp/

// function that will clone the audio node, and play it
function cloneAndPlay(audioNode) {
    // the true parameter will tell the function to make a deep clone (cloning attributes as well)
    var clone = audioNode.cloneNode(true);
    clone.play();
}

$("#string-E1").mousedown(function() {
    cloneAndPlay(E1);
});
$("#string-B2").mousedown(function() {
    cloneAndPlay(B2);
});
$("#string-G3").mousedown(function() {
    cloneAndPlay(G3);
});
$("#string-D4").mousedown(function() {
    cloneAndPlay(D4);
});
$("#string-A5").mousedown(function() {
    cloneAndPlay(A5);
});
$("#string-E6").mousedown(function() {
    cloneAndPlay(E6);
});