寻找 HTML5 音频元素会导致延迟（中断同步）

Question

我正在为音乐家开发一个协作式录音平台（类似于与 GitHub 结合的云 DAW）。 简而言之，一个会话（歌曲）由一系列音轨组成，以 AAC 编码并通过 HTML5 <audio> 元素播放。每个音轨都通过 MediaElementAudioSourceNode 连接到 Web Audio API，并通过一系列节点（目前是增益和平移）路由到目的地。到现在为止还挺好。

我能够毫无问题地同步、暂停、停止和搜索它们，并成功实现了常见 DAW 的常见静音、独奏功能，以及波形可视化和导航。这是播放部分。

至于录制部分，我将 getUserMedia() 的输出连接到 MediaStreamAudioSourceNode，然后将其路由到 ScriptProcessorNode，使用 Web Worker 将录制的缓冲区写入数组。 当录制过程结束时，将录制的缓冲区写入 PCM 波形文件并上传到服务器，但同时连接到 <audio> 元素以立即播放（否则我将不得不等待 wav文件上传到服务器可用）。

问题是：如果我从头开始播放录制的曲目，我可以与以前的曲目完美同步播放，但我无法正确搜索。如果我更改新录制轨道的 currentTime 属性，它会变得混乱且严重不同步——我重复一遍，只有在添加“本地”轨道时才会发生这种情况，因为其他轨道在我改变它们的位置时表现得很好。

有没有人知道是什么原因造成的？我还能提供其他有用的信息吗？

提前谢谢你。

Answer 1

从根本上说，不能保证元素会正确同步。如果您真的希望音频同步，则必须将音频文件加载到 AudioBuffers 并使用 BufferSourceNodes 播放它们。

您会发现在一些相对简单的情况下，您可以让它们同步 - 但它不一定适用于设备和操作系统，一旦您开始尝试寻找，正如您发现的那样，它就会崩溃。将下载、解码和播放打包为一个步骤的方式不适合同步。