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

Question

我目前正在为音乐家开发一个基于网络的协作录音平台，类似于移植到网络的基本 DAW（具有额外的社交/共享功能）。无论如何，我的目标是让它 100% 无闪存，所以我已经阅读了很多有关 HTML5 的内容，尤其是 Web Audio API（this 这本书帮了很多忙，顺便说一句）。

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

问题在于录音过程的开始涉及两件事：播放所有以前录制的曲目，因此音乐家有一个可以在其上播放的参考，以及开始实际录音（将缓冲区写入数组，即是）。

虽然用户在录音时麦克风的声音没有听得见的延迟或延迟，但当录音结束并播放所有曲目时，新录制的曲目会有轻微的延迟。

是什么原因造成的？有哪些可能的解决方案？

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

对不起，如果这是题外话或不包含实际代码（如有必要，我很乐意提供），但在这方面没有做太多的事情，所以任何想法都会受到欢迎。

提前致谢！

Answer 1

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

基本上，您输出一个声音（例如点击音轨）并同时录制它，以便查看播放和录制声音需要多少毫秒。

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

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

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

现有软件延迟校准的两个示例：

• Audacity Latency Test
• Ardour 自动延迟检测

Answer 2

我正在尝试做同样的事情 - HTML5 多轨录音机。启用 webkit 的东西还没有准备好迎接黄金时段。 Recorder.js 非常有前途。 http://carolwith.me 是一个基于 Flash 的多轨录音机，它完全符合我的要求（除了我也想要 HTML5 而不是 Flash）。看看 - 它是令人难以置信的愚蠢！如果你玩它，它也不会真正同步。 我也寻求了一种算法设置来进行计数（预卷），然后设置随后录制的曲目。我找到了一个人，他有一个可能的解决方案，但他放弃了它，然后关闭了他的网站。让我们继续努力！自 2010 年以来一直从事这项工作，我确信最难的部分（getusermedia）将成为标准。