MediaRecorder暂停与恢复事件在Firefox中无法正常工作

我最近帮不少开发者排查过Firefox环境下MediaRecorder的兼容问题，结合你提供的代码片段，梳理几个最可能导致异常的核心点，帮你快速定位排查：

• 事件绑定时机要提前
  你代码里的getStatus()直接读取mediaRecorder.state，但Firefox对MediaRecorder的状态回调触发时机要求严格。一定要在录制启动前就完成onstart、onpause、onresume、ondataavailable等事件的绑定，不要等到录制开始后再动态绑定——晚绑定的事件在Firefox里大概率无法被正确触发。

• 明确指定兼容的MIME类型
  很多人容易忽略，Firefox对MediaRecorder的编码格式支持有特殊性。只传{audio: true}的约束时，浏览器会自动选默认编码，但这个默认值在Firefox里可能兼容性不佳。建议先检测再指定：

  // 优先选择Firefox支持性更好的编码格式
  const supportedMime = MediaRecorder.isTypeSupported('audio/webm; codecs=opus') 
    ? 'audio/webm; codecs=opus' 
    : 'audio/ogg; codecs=vorbis';
  mediaRecorder = new MediaRecorder(stream, { mimeType: supportedMime });
  

• 音频流的生命周期要管好
  Firefox中如果音频流（stream）在录制过程中被意外中断（比如页面切换到后台、音频权限变更），MediaRecorder会直接进入inactive状态。另外，停止录制后一定要记得释放轨道资源，避免内存泄漏：

  function stopRecording() {
    mediaRecorder.stop();
    // 主动释放音频轨道
    stream.getTracks().forEach(track => track.stop()); 
  }
  

• 务必绑定ondataavailable事件
  你提供的代码片段里mediaRecorder.ons...没写完，大概率是漏了关键的ondataavailable监听。Firefox下必须通过这个事件才能获取录制的Blob数据，否则即使录制完成也拿不到有效文件：

  let recordedChunks = [];
  mediaRecorder.ondataavailable = function(e) {
    if (e.data.size > 0) {
      recordedChunks.push(e.data);
    }
  };
  mediaRecorder.onstop = function() {
    const audioBlob = new Blob(recordedChunks, { type: mediaRecorder.mimeType });
    // 这里可以添加下载、播放等后续逻辑
  };
  

你可以先从这几个点入手排查，尤其是MIME类型和事件绑定顺序，这是Firefox下最容易踩的坑。如果控制台有具体的报错信息，补充出来能更快锁定问题。

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