寻求HTML5音频元素会导致延迟(中断同步)

时间:2013-08-10 02:00:37

标签: javascript html5 html5-audio web-audio

我正在为音乐家开发一个协作音频录制平台(类似云GAW与GitHub结合)。 简而言之,会话(歌曲)由一系列音轨组成,以AAC编码并通过HTML5 <audio>元素播放。每个轨道通过MediaElementAudioSourceNode连接到Web Audio API,并通过一系列节点(此时获取和平移)路由到目标。到现在为止还挺好。

我能够在没有任何问题的情况下同步,暂停,停止和搜索它们,并成功实现了常见的静音,常见DAW的独奏功能,以及波形可视化和导航。这是播放部分。

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

问题在于:如果从头开始播放,我可以将录制的曲目与以前的曲目完美同步,但我无法正确搜索。如果我更改了新录制曲目的currentTime属性,它会变得混乱而且非常不同步 - 我重复说这只会在添加“本地”曲目时发生,因为当我改变其位置时其他曲目表现得很好。 / p>

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

提前谢谢。

1 个答案:

答案 0 :(得分:2)

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

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