jQuery Audio：重複するサウンドを許可する方法

Question

http://codepen.io/JTBennett/pen/vyJmBK （以下抜粋）

こんにちは - ちょうど彼らがかなり完了するオーディオファイルのを待つよりも、クリックされているような音が自分自身で何度でもをオーバーラップすることを可能にしたいです。

文字列の音は重なり合っていますが、同じ音を重ねる方法がわかりません - E6の文字列を3回押すと、最初のクリック後に音が終了するまで何もトリガーしません。

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