javascript - 在 Web Audio API 中精确播放/暂停/搜索大型音频文件的最佳方式

Question

阅读了类似 this 的文章和 this和 this ，我仍然不清楚如何在 javascript 中以时间精度播放/暂停/寻找大型音轨。

我正在开发一个动画库，它允许您创建动画时间轴来控制 WebGL 缓冲区和 DOM 元素以及几乎所有其他内容。这是一个屏幕截图:

我刚刚找到音轨，它需要的是:

1. 能够播放大型轨道
2. 播放/暂停
3. 寻找
4. 时间精度
5. 如果能够拥有音频效果并在精确的时间控制它们的参数，那将是一个额外的好处。

我以前使用音频元素来播放与音乐同步的动画。我曾经使用音频元素的 currentTime 属性更新动画的时钟。我记得 currentTime 不是很可靠。在 Chrome 中，与使用 Adob​​e Audition 提取的精确时间相比，我过去常常将 currentTime 偏移很多，而在 FireFox 中，我会偏移更多——如果我没记错的话是 50 毫秒。我这样做只是为了在我的机器上保持同步，也许我的大多数访问者也是如此。两年后的现在，随着 Chrome 和 Firefox 的新版本，我似乎应该调整 offset 变量以再次同步。

显然，这不是最好的方法。

现在，对于我的新应用程序，我想我可以通过 Audio API 获得精确度并只安排在精确的时间播放轨道，但问题将是如何播放大轨道(大约 15 分钟长，重叠)，以及还可以播放/暂停/搜索多个轨道等。内存/性能也很重要。

什么方法可以满足这些需求？

为清楚起见，用例类似于 Adob​​e After Effects 或 Premiere 或任何其他带有时间轴的软件，用于同步音频的视觉效果。

Answer 1

据我所知，您无法使用 Web Audio API 执行此操作。

根据 the MDN docs , AudioBuffer对象“旨在保存小的音频片段，通常少于 45 秒”。

对于大文件，您应该使用 MediaElementAudioSourceNode ，它从 <audio> 中获取音频数据或 <video> HTML 元素。这些元素从服务器流式传输数据，因此不需要预先加载和解码，允许您使用任何大小的文件。

使用 MediaElementAudioSourceNode 的缺点是它不支持许多基本操作 AudioBuffer支持，喜欢寻求。如果我理解正确的话，这不是 vendor 可以解决的问题，因为服务器需要实现系统的一部分。

在实践中，Chrome 和 FireFox(我不知道其他的)会加载超过 45 秒的轨道。我只测试了两首歌，但都完美无缺。一个是 2:56(Bob Marley 的 Africa Unite)，另一个是 5:50(Method Man 来自 36 Chambers)；都是 MP3 文件。我还尝试加载一个小时的长篇演讲，但页面崩溃了。我的笔记本电脑可以轻松地在内存中保存一个小时长的音频缓冲区，但我认为 Chrome 和 Safari 限制了页面可以使用的内存，也许 FireFox 也是如此。

抱歉，这个回答有点轶事。 Web Audio API 实现是新的，所以您真的只需要尝试使用不同引擎的东西，看看在这个阶段会发生什么，而我自己只玩过 API。