我有一个基于画布的游戏的以下JS代码.
var EXPLOSION = "sounds/explosion.wav";
function playSound(str,vol) {
var snd = new Audio();
snd.src = str;
snd.volume = vol;
snd.play();
}
function createExplosion() {
playSound(EXPLOSION,0.5);
}
这是有效的,但每次调用时它都会发送一个服务器请求来下载声音文件.或者,如果我事先声明了Audio对象：
var snd = new Audio(); snd.src = EXPLOSION; snd.volume = 0.5; function createExplosion() { snd.play(); }
这是有效的,但是如果在声音播放完毕之前调用createExplosion函数,它根本不播放声音.这意味着一次只允许声音文件的单个播放 – 并且在发生多次爆炸的情况下,它根本不起作用.
有没有办法正确播放多次与自身重叠的音频文件？
解决方法
您可以使用cloneNode()复制节点,并播放复制节点的play().
我的音频元素如下所示：
<audio id="knight-audio" src="knight.ogg" preload="auto"></audio>
我有一个onClick监听器就是这样做的：
function click() {
const origAudio = document.getElementById("knight-audio");
const newAudio = origAudio.cloneNode()
newAudio.play()
}
由于不会显示音频元素,因此您实际上不必将节点附加到任何内容.
我验证了客户端和服务器端,Chrome只尝试下载音频文件一次.
注意事项：我不确定性能影响,因为在我的网站上,这个剪辑的播放次数不超过页面的最大值的40倍.如果你做的事情要大得多,你可能需要清理音频节点吗？
