使用 WebAudio 合并/混合两个音频流答案

【问题标题】：Merging/mixing two audio streams with WebAudio使用 WebAudio 合并/混合两个音频流
【发布时间】：2013-12-30 04:34:22
【问题描述】：

我有一个来自 navigator.getUserMedia 的 MediaStreamSource，它连接到 GainNode，而 GainNode 又连接到 ScriptProcessorNode，如下所示：

[getUserMediaStream] -> [MediaStreamSource] -> [GainNode] -> ScriptProcessorNode -> (destination)

在我的应用程序中，主要工作是 ScriptProcessorNode，它通过 WebSocket 处理原始音频流并将其传输到远程服务器（我的应用程序基本上是基于 Web 的录音机）以进行保存。这很好用。

但是，现在我尝试引入第二个 MediaStreamSource，这一次来自 WebRTC PeerConnection。对等连接本身工作正常，如果将音频路由到一个元素，我可以听到来自对等的音频。但是，我希望这第二个 MediaStreamSource 也可以通过管道传输到 ScriptProcessorNode，从而有效地记录两个音频流。

我要做的是在两个音频流到达 ScriptProcessorNode 之前将它们混合在一起。我尝试将第二个 MediaStreamSource 连接到同一个 GainNode（也直接连接到 ScriptProcessorNode），但这不起作用，因为这些节点都不接受多个输入节点（即使它在尝试连接多余节点时从未返回任何错误）。我正在尝试实现这样的目标：

类似这样的：

[MediaStreamSource] -> [Intermediary Node(s)?] -> [GainNode] -> [ScriptProcessorNode] -> [Server]
                     /
[MediaStreamSource] /

然后我查看了 WebAudio 规范，发现唯一真正接受多个输入的节点是 ChannelMergerNode。但是，规范指出，流根据连接到节点的顺序被合并到通道中，因此连接到输入的第一个流将成为输出的左通道，第二个流将成为右通道。据此，我认为结果将最终成为我左耳上的一个流和我右耳上的另一个。我只想将两个流合并并平均混合到一个单声道中。

使用当前的 WebAudio API 是否可以做到这一点？

非常感谢您的帮助！

埃里克

【问题讨论】：

我也有同样的需要。你是怎么解决这个问题的？

标签： javascript html audio stream webrtc

【解决方案1】：

您是否尝试将 ChannelMergerNode 与下混音结合使用？

http://www.w3.org/TR/webaudio/#UpMix

【讨论】：

【解决方案2】：

您可以创建一个 MediaStreamDestination：

audioStreamDestination = audioContext.createMediaStreamDestination();

然后将多个节点连接到它：

node1.connect(audioStreamDestination)
node2.connect(audioStreamDestination)

您可以在此处使用麦克风的输入和 audioworklet 的输出查看它在实践中是如何完成的：

https://github.com/petersalomonsen/javascriptmusic/blob/master/wasmaudioworklet/screenrecorder/screenrecorder.js#L15

【讨论】：