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

时间:2013-06-23 17:12:40

标签: html5 html5-audio web-audio getusermedia

我目前正在为音乐家制作基于网络的协作录制平台,类似于移植到网络上的基本DAW(具有额外的社交/共享功能)。无论如何,我的目标是让它100%无闪存,所以我一直在阅读很多关于HTML5的内容,特别是Web Audio API(this书帮助了很多,顺便说一下。)

要使用getUserMedia()录制用户麦克风的音频,我制作了RecorderJS的自定义版本。简而言之,我将getUserMedia()的输出路由到ScriptProcessorNode,每4096个样本将inputBuffer的内容写入一个稍后导出到PCM WAV文件的数组。到目前为止,它运作良好。

问题在于录制过程的开始涉及两件事:播放所有先前录制的曲目,因此音乐家可以参考播放,并开始实际录制(将缓冲区写入阵列,是)。

虽然用户录制时麦克风的声音没有听觉延迟或延迟,但是当录制结束并播放所有曲目时,新录制的曲目会略有延迟。

导致这种情况的原因是什么?有哪些可能的解决方案?

我以为我可以通过将回放发送到同一处理器节点然后找出它们实际开始的时间来找到两个事件之间的时间差,以补偿任何延迟。 为此,我需要让ScriptProcessorNode接收通道1和2上的getUserMedia内容,并在通道3和4上播放,但我无法完成这项工作。 我尝试将两个源路由到处理器节点,我也尝试使用Merger / Splitter,但似乎没有任何工作。它们都到达通道1和2上的处理器节点,而3和4则为空。

很抱歉,如果这是偏离主题或不包含实际代码(我非常乐意在必要时提供),但是在这个领域没有太多的东西,所以任何想法都会非常受欢迎。< / p>

提前致谢!

2 个答案:

答案 0 :(得分:1)

您可以查看how Audacity does latency correction并从中获取灵感。

基本上,您输出一个声音(例如一个点击音轨)并同时录制它,以便查看声音播放和录制所需的毫秒数。

这段时间是您在播放时需要补偿的延迟。

换句话说,在录制曲目后,您需要将曲目移动到需要补偿的延迟量,因此它将与之前录制的曲目同步播放。

每个系统都有自己的延迟,因此您不能只测量一次。您需要在程序中添加一项功能,以便用户以最简单的方式进行延迟校准。

现有软件的延迟校准的两个例子:

答案 1 :(得分:0)

我正在尝试做同样的事情 - HTML5多轨录音机。启用webkit的东西还没有准备好迎接黄金时段。 Recorder.js很有前途。 http://carolwith.me是基于闪存的多轨录音机,完全符合我的要求(除了我也想要HTML5而不是Flash)。看看 - 这是令人难以置信的傻瓜!如果你玩它,它也不会真正同步。 我也寻求一种算法设置,用于进行计数(前滚),然后设置随后记录的音轨。我找到了一个有可能解决方案的人,但他放弃了它,然后把他的网站搞砸了。让我们继续努力!从2010年开始,我确信最难的部分(getusermedia)将成为标准。