jQuery Audio：如何允许重叠的声音？

Posted 2023-02-25

【中文标题】jQuery Audio：如何允许重叠的声音？

【英文标题】：jQuery Audio: How to Allow Overlapping Sounds?

【发布时间】：2016-11-26 19:57:47

【问题描述】：

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 的最终版本。

【参考方案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);
);

【讨论】：

非常感谢，我在 JS 方面不是最棒的，但我认为现在的最终版本相当不错：codepen.io/JTBennett/pen/vyJmBK

不客气！是的，这支笔非常棒。干得好！