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

Question

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

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

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

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

有没有人知道可能导致这种情况的原因？我可以提供其他有用的信息吗？

先感谢您。

Answer 1

从根本上来说，无法保证元素能够正确同步。如果您确实希望音频同步，则必须将音频文件加载到 AudioBuffer 中并使用 BufferSourceNode 播放它们。

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