javascript - jQuery 音频 : How to Allow Overlapping Sounds?

Question

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

你好 - 只是想让声音与它们自己重叠的次数与它们被点击的次数一样多，而不是等待音频文件完成。

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

$("#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;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tuner">
<div id="string-E1" class="string">E1</div>
<div id="string-B2" class="string">B2</div>
<div id="string-G3" class="string">G3</div>
<div id="string-D4" class="string">D4</div>
<div id="string-A5" class="string">A5</div>
<div id="string-E6" class="string">E6</div>
</div>

<audio id="E1" preload="auto">
<source src="https://www.electricherald.com/tuner/1-E.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>
<audio id="B2" preload="auto">
<source src="https://www.electricherald.com/tuner/2-B.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>	
<audio id="G3" preload="auto">
<source src="https://www.electricherald.com/tuner/3-G.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>	
<audio id="D4" preload="auto">
<source src="https://www.electricherald.com/tuner/4-D.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>	
<audio id="A5" preload="auto">
<source src="https://www.electricherald.com/tuner/5-A.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>	
<audio id="E6" preload="auto">
<source src="https://www.electricherald.com/tuner/6-E.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>

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

Answer 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);
});