调用MediaRecorder.stop()后如何立即终止设备麦克风占用？

调用MediaRecorder实例停止音频录制后，设备常显示浏览器标签仍处于“录制”状态，持续时长不定。该现象在桌面和移动浏览器中均存在，即便MediaRecorder.state返回inactive。

此问题会干扰移动设备上的其他应用：即便已停止录制，设备仍显示浏览器占用音频输入，导致无法在WhatsApp等其他应用中录制音频。该问题在Android版Chrome和Brave浏览器中均能复现。

核心原因是MediaRecorder.stop()仅停止录制流程，但底层的MediaStream及其音频轨道仍处于活跃状态，导致设备认为麦克风仍被占用。要彻底释放音频输入，需要主动终止MediaStream的所有轨道：

• 保存通过navigator.mediaDevices.getUserMedia()获取到的MediaStream引用
• 在调用MediaRecorder.stop()后，遍历MediaStream的所有音频轨道并调用track.stop()

示例代码：

// 保存MediaStream引用
let mediaStream;
let mediaRecorder;

// 启动录制流程
async function startRecording() {
  mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  mediaRecorder = new MediaRecorder(mediaStream);
  // 此处添加录制数据处理逻辑
}

// 停止录制并强制释放麦克风
function stopRecording() {
  // 停止MediaRecorder
  mediaRecorder.stop();
  
  // 遍历并终止所有音频轨道
  mediaStream.getAudioTracks().forEach(track => {
    track.stop();
  });
  
  // 清空引用，辅助垃圾回收
  mediaStream = null;
  mediaRecorder = null;
}

额外注意：

• 不要依赖MediaRecorder.onstop事件触发轨道停止，该事件可能存在延迟，建议调用stop()后立即执行轨道终止操作
• 若存在多个音频轨道，需确保所有轨道都被停止
• 部分浏览器中，调用track.stop()会触发MediaRecorder的stop或error事件，需提前做好事件监听处理

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