AudioBuffer不可缓存/ decodeAudioData需要很长时间

Question

我正在尝试使用Web Audio Api为音乐编写自定义网络播放器，但我遇到了解码音频的问题。

我从我的后端获取.mp3作为ArrayBuffer并使用AudioContext.decodeAudioData函数对其进行解码。

  const resp = await fetch(url);
  const raw = await resp.arrayBuffer();
  const audioBuffer = context.decodeAudioData(raw);

我试图将AudioBuffer缓存在IndexedDB中，但它不可克隆。使用常规mp3在我的设备上解码大约需要10秒钟，这很长。我还有其他选择可以防止歌曲之间的等待时间过长（除了预取和＃34;预解码＆＃34;）

Answer 1

AudioBuffer不适用于大量音频

  

此接口表示内存驻留音频资源（表示一次性声音和其他短音频剪辑）。其格式是非交错的IEEE 32位线性PCM，标称范围为-1 - > 1。 +1。它可以包含一个或多个通道。通常，预期PCM数据的长度相当短（通常略小于一分钟）。对于较长的声音，例如音乐配乐，流媒体应与音频元素和MediaElementAudioSourceNode 一起使用。

（强调我的）

https://www.w3.org/TR/webaudio/#AudioBuffer

如果您确实需要动态操作音频，则可能需要查看MediaElementAudioSourceNode。否则一个简单的音频元素就足够了。