javascript - 播放 html5 的 Audio 对象的多个实例

Question

我正在用 Javascript 制作一个小游戏，它需要一些音频以获得更好的用户体验。 我遇到的主要问题是我必须多次播放一首歌曲/声音，有时是同时播放。 但是，如果我 cloneNode 音频对象，音频会从服务器再下载一次，因此只能在后面播放，因为必须先下载。所以在正常游戏中声音可以下载超过100次!

因为我在网上找不到答案，所以我问你:)

请注意，我想用我自己的代码而不是库来做到这一点。

Answer 1

使用 new Audio()/HTMLAudioElement.play 的解决方案适用于音乐之类的内容，但不允许同时播放同一音频的多个副本。对于音效，正确使用的工具是 AudioBuffer。来自 Web Audio API .举个简单的例子:

const playButton = document.getElementById('play');

let interval = null;

playButton.addEventListener('click', async () => {
  // if already started playback, just stop it
  if (interval !== null) {
    clearInterval(interval);
    interval = null;
    return;
  }

  // create an audio context
  const audioCtx = new AudioContext();
  
  // fetch a sound effect, and get an ArrayBuffer
  const resp = await fetch('https://upload.wikimedia.org/wikipedia/commons/6/68/Crash.ogg');
  const arrayBuffer = await resp.arrayBuffer();
  
  // decode the ArrayBuffer into an AudioBuffer
  const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);
  
  // set an interval for every 250ms
  interval = setInterval(() => {
    // create an AudioBufferSourceNode
    const source = audioCtx.createBufferSource();
    
    // set the AudioBuffer
    source.buffer = audioBuffer;
    
    // connect it to the default sound output
    source.connect(audioCtx.destination);
    
    // start playback
    source.start();
  }, 250);
});

<button id="play">Play</button>