jQuery Audio：如何允許重疊聲音？

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> \t 
 
<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> \t 
 
<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> \t 
 
<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> \t 
 
<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); 
});