使用getUserMedia/Web Audio API同步播放和录制音频

9
我目前正在为音乐家开发基于Web的协作录音平台,类似于将基本DAW移植到Web上(带有额外的社交/共享功能)。无论如何,我的目标是使其完全不依赖Flash,因此我一直在阅读关于HTML5和特别是Web Audio API的内容(顺便说一句,这本书对我帮助很大)。
使用getUserMedia()从用户的麦克风录制音频时,我制作了一个自定义版本的RecorderJS。简而言之,我将getUserMedia()的输出路由到ScriptProcessorNode,每4096个样本,将inputBuffer的内容写入稍后导出为PCM WAV文件的数组中。到目前为止,它运行得很好。
问题在于录制过程的开始涉及两件事情:播放所有以前录制的轨道,以便音乐家可以参考并在其上演奏,并开始实际录制(即将缓冲区写入数组)。
尽管用户录制时来自麦克风的声音没有听到任何延迟或延迟,但当录制结束并播放所有轨道时,新录制的轨道会有轻微的延迟。
这可能是什么原因?有哪些可能的解决方案?
我认为可以通过将播放发送到同一处理器节点并找出它们实际开始的时间差来找到两个事件之间的时间差,以补偿任何延迟。为此,例如,我需要使ScriptProcessorNode在通道1和2上接收getUserMedia内容,并在通道3和4上播放,但我无法使其正常工作。我尝试将两个源路由到处理器节点,并尝试使用Merger/Splitter,但似乎都不起作用。它们都在通道1和2上到达处理器节点,而3和4为空。
如果这与主题无关或不包含实际代码(如果需要,我很乐意提供),请原谅,但在这个领域几乎没有多少东西可做,因此任何想法都非常受欢迎。
先行致谢!

很确定那只是由于缓冲引起的。尝试在scriptProcessorNode上使用较小的缓冲区大小(可能为512),看看延迟是否减少。我猜此时几乎不会注意到它。 - Kevin Ennis
2个回答

3
你可以查看Audacity如何进行延迟校正,并从中获得灵感。
基本上,您需要输出一个声音(例如点击轨道)并同时录制它,以便查看声音播放和录制所需的毫秒数。
这段时间是您需要在播放中进行补偿的延迟时间。
换句话说,在录制轨道后,您需要将轨道移动到您需要进行补偿的延迟量,以便与先前记录的轨道同步播放。
每个系统都有自己的延迟时间,因此您不能只测量一次。您需要在程序中添加一个功能,以最简单的方式允许用户进行延迟校准。
以下是现有软件中延迟校准的两个示例:

1
我正在尝试做同样的事情 - HTML5多轨录音机。 Webkit启用的功能还没有准备好供正式使用。 Recorder.js非常有前途。http://carolwith.me是一个基于Flash的多轨录音机,完全符合我的要求(除了我也想要HTML5而不是Flash)。看一下 - 它太傻了!如果你玩它,它也不能真正同步。我也在寻找一种算法来进行倒计时(预卷)并将随后录制的轨道设置为它。我找到了一个可能的解决方案,但他放弃了,然后关闭了他的网站。让我们继续努力吧!自2010年以来一直在努力,我相信最困难的部分(getusermedia)将成为标准。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接