javascript - 通过 JS 重叠播放音频

Question

我有以下基于 Canvas 的游戏的 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);
}

这是可行的，但是它会在每次调用时发送一个服务器请求来下载声音文件。或者，如果我事先声明音频对象:

var snd = new Audio();
snd.src = EXPLOSION;
snd.volume = 0.5;

function createExplosion() {
  snd.play();
}

这是可行的，但是如果在声音播放完毕之前调用 createExplosion 函数，它根本不会播放声音。这意味着一次只允许播放一次声音文件 - 在发生多次爆炸的情况下它根本不起作用。

有什么方法可以正确播放多次与自身重叠的音频文件？

Answer 1

您可以使用 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()
}

并且由于不会显示 audio 元素，因此您实际上不必将节点附加到任何东西。

我验证了客户端和服务器端，Chrome 只尝试下载一次音频文件。

注意事项:我不确定对性能的影响，因为在我的网站上，此剪辑在一个页面上播放的最大值不会超过 ~40 倍。如果您正在做比这大得多的事情，您可能必须清理音频节点？