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

【问题标题】：AudioBuffer not cachable / decodeAudioData takes to longAudioBuffer 不可缓存 / decodeAudioData 需要很长时间
【发布时间】：2017-09-21 00:35:01
【问题描述】：

我正在尝试使用 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 秒，这很长。我还有其他选择来防止歌曲之间的长时间等待（除了预取和“预解码”）吗？

【问题讨论】：

您不能将数据作为流获取并分段解码吗？
部分解码似乎相当复杂，因为 javascript 时钟非常不准确。我试过了，但我无法阻止音频片段之间的噼啪声。此外，文档说：“异步解码包含在 ArrayBuffer 中的音频文件数据。在这种情况下，ArrayBuffer 通常在将 responseType 设置为 arraybuffer 后从 XMLHttpRequest 的响应属性加载。此方法仅适用于完整文件，而不适用于音频文件的片段。” developer.mozilla.org/de/docs/Web/API/AudioContext

标签： javascript web-audio-api

【解决方案1】：

AudioBuffer 不适用于大型音频

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

（强调我的）

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

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

【讨论】：

哦该死的，所以我完全滥用了 decodeAudioBuffer 方法。感谢您的澄清，我将尝试使用 html 元素实现播放器。
@Prinzhorn，MediaElementAudioSourceNode 似乎打算与 HTML5 结合使用。是否有用于较长音频的 Node.js 模块，我可以将其与 Web Audio Api 模块一起用于较短的声音？
@WesModes 您在 Node 进程中究竟对音频做了什么？根据用例，这可能不是一个好主意，因为对 decodeAudioData 的调用将阻止您的整个 Node 进程。但是，如果这对您来说不是问题（例如，您产生了第二个进程），那么即使对于大文件，也只需使用 decodeAudioData。如果音频文件是本地的，则不必处理网络延迟，而您必须在浏览器中处理。