为何其他标签页/窗口通过Web Audio API播放音频会导致MediaStream录制故障？

根本原因 #

这是浏览器音频会话资源冲突导致的问题：

• 浏览器音频硬件的全局配置（采样率、时钟同步）会被活跃的AudioContext实例主导。当其他标签页创建新的AudioContext并连接媒体源时，浏览器会重新协商音频硬件参数，而MediaRecorder直接录制的麦克风原始流绑定在初始音频会话上，参数不匹配就会引发音频失真、中断。
• 部分浏览器的音频优先级策略中，Web Audio会话优先级高于普通媒体录制，当有Web Audio上下文活跃时，麦克风输入流会被强制适配Web Audio的参数，且适配过程无平滑处理，进一步加剧故障。

可行的解决方案 #

1. 用Web Audio API接管麦克风输入（推荐） #

将麦克风输入接入当前页面的AudioContext，再通过MediaStreamDestination生成可录制的流，让录制流参数与Web Audio上下文保持同步，即使其他标签页修改音频配置，当前上下文会自动适配，避免参数冲突：

// 初始化音频上下文
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// 获取麦克风流并接入AudioContext
const micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
const micSource = audioCtx.createMediaStreamSource(micStream);

// 创建用于录制的目标流
const recordDest = audioCtx.createMediaStreamDestination();
micSource.connect(recordDest);

// 使用MediaRecorder录制目标流
const recorder = new MediaRecorder(recordDest.stream);

// 后续录制逻辑（示例）
recorder.start();
recorder.ondataavailable = (e) => {
  // 处理录制的Blob数据
};

2. 强制麦克风使用固定采样率 #

在请求麦克风权限时指定固定采样率，减少其他会话修改硬件参数对录制流的影响：

const micStream = await navigator.mediaDevices.getUserMedia({
  audio: {
    sampleRate: { exact: 44100 } // 固定为常用的44.1kHz采样率
  }
});
// 后续正常使用MediaRecorder录制该流

3. 监听音频上下文状态并重置录制 #

监听当前页面AudioContext的状态变化，当检测到上下文被干扰挂起时，重新初始化录制流程：

audioCtx.onstatechange = () => {
  if (audioCtx.state === 'suspended') {
    // 重置麦克风流和MediaRecorder
    resetRecording();
  }
};

内容的提问来源于stack exchange，提问作者Sveppur