为什么其他选项卡/窗口通过 Web Audio API 播放音频会导致通过 MediaStream Recording API 录制的音频出现音频故障？

Question

我面临一个问题，如果任何其他浏览器选项卡或窗口在所述 MediaRecorder 实例时通过 Web Audio API 播放音频，则使用 MediaStream Recording API 的 MediaRecorder 重新编码的音频将严重失真，甚至完全消失。正在录制音频。

我发现使用我自己的实现以及使用任何公开可用的 MediaRecorder 演示都可以重现该问题。

如何使用例如复制Wavesurfer.js 及其记录插件：

• 使用 Wavesurfer.js 录制插件演示开始录制音频
• 在录制过程中，使用这支笔
在另一个选项卡中开始播放

笔创建一个新的

AudioContext

，并使用它与

MediaElementSource

元素创建一个

<audio>

，然后允许控制它的各个方面：

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const audioElement = document.querySelector('audio');
const track = audioCtx.createMediaElementSource(audioElement);

• 增加 codepen Web Audio 演示的音量可能会增加由此产生的录音故障的严重性
• 停止 codepen Web Audio 演示 - 从此时开始录制的任何音频都应该再次清晰

是否有可能实现 MediaStream Recording API 的实现，而不会遇到所描述的问题？它的行为方式背后可能是什么？

Answer 1

根据我和 @Kaiido 与 chromium 开发人员的讨论，我们发现该行为是基于该引擎的浏览器进行信号处理而设计的，并且只要在您的媒体上使用

echoCancellation

约束流，来自其他选项卡/窗口的播放将被严重静音。

同时进行的录音（具有

echoCancellation

约束的录音）最终也会受到回声消除算法的严重影响，因此，如果您遇到这种情况 - 最好的选择是禁用

echoCancellation

在您的

MediaStreamConstraints

中，希望不会对您的输出质量产生太大影响。

如果您需要有关该主题的更多见解，请参阅这些 chromium 问题线程：

• 问题 1518504：如果在另一个选项卡正在播放音频时录制，则使用 MediaRecorder API 录制的音频会失真
• 问题 1518763：麦克风输入受到其他播放音频的选项卡的影响