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

Question

阅读this和this以及this等文章之后，我仍然不清楚如何在时间精确度的javascript中播放/暂停/搜索大型音轨。

我正在开发一个动画库，它允许您创建控制WebGL缓冲区和DOM元素以及其他任何东西的动画时间轴。这是一个截图：

我刚接触到音轨，它需要的是：

1. 能够播放大曲目
2. 播放/暂停
3. 求
4. 时间精确度
5. 能够在精确的时间拥有音频效果并控制其参数将是一个奖励。

我之前使用过音频元素来播放与音乐同步的动画。我曾经用音频元素的currentTime属性更新动画的时钟。我记得currentTime不太可靠。在Chrome中，与使用Adobe Audition提取的精确时间相比，我常常将currentTime偏移一大部分，而在FireFox中，如果我没记错的话，我会更偏移50毫秒。我这样做只是为了让我的机器和我的大多数访客保持同步。两年后，使用新版本的Chrome和Firefox，似乎我应该调整offset变量以使事情再次同步。

显然，这不是最佳方法。

现在，对于我的新应用程序，我认为我可以通过Audio API获得精确度并且只计划在精确时间播放曲目，但问题将是如何播放大曲目（大约15分钟，重叠），以及还有播放/暂停/寻找多个曲目等。记忆/性能也很重要。

哪种方法适合这些需求？

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

Answer 1

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

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

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

使用MediaElementAudioSourceNode的缺点是它不支持AudioBuffer支持的许多基本操作，例如搜索。如果我理解正确，这不是供应商可以解决的问题，因为服务器需要实现系统的一部分。

在实践中，Chrome和FireFox（我不知道其他任何人）将加载超过45秒的曲目。我只测试了两首歌，但两者都很完美。一个是2:56（Bob Marley的 Africa Unite ），另一个是5:50（来自 36 Chambers 的 Method Man ）;两者都是MP3文件。我还尝试加载一小时的谈话，页面崩溃了。我的笔记本电脑可以轻松地在内存中保存一小时的音频缓冲区，但我认为Chrome和Safari限制了页面可以使用的内存，也可能是FireFox。

对不起，这个答案有点轶事。 Web Audio API实现是新的，所以你真的只需要尝试不同引擎的东西，看看在这个阶段发生了什么，我自己只玩过API。