Safari浏览器MediaRecorder不支持，音频录制报错求助

1. 适配Safari兼容的媒体格式 #

Safari对WebM格式的MediaRecorder支持有限（旧版本完全不支持），需要切换到Safari原生支持的音频格式，优先推荐audio/mp4; codecs=mp4a.40.2，也可以降级到audio/wav：

修改格式检测逻辑：

// 按兼容性优先级检测格式
const supportedFormats = [
  'audio/mp4; codecs=mp4a.40.2',
  'audio/wav',
  'video/webm; codecs=vp8'
];
let canRecord = false;
let targetFormat = '';
for (const format of supportedFormats) {
  if (MediaRecorder.isTypeSupported(format)) {
    canRecord = true;
    targetFormat = format;
    break;
  }
}

2. 增加MediaRecorder存在性检测 #

部分旧版Safari（macOS 10.15/iOS 13及以下）没有全局MediaRecorder对象，需提前做兼容判断：

if (!window.MediaRecorder) {
  alert('当前浏览器不支持音频录制，请使用Chrome、Firefox或更新版本的Safari');
  return;
}

3. 消除摄像头权限错误 #

日志出现的Webcam permission error是因为代码可能隐式触发了摄像头请求，明确只请求音频权限即可：

global.audioStream = await navigator.mediaDevices.getUserMedia({ 
  audio: true,
  video: false // 显式关闭视频请求，避免触发摄像头权限弹窗
});

完整适配示例代码 #

async function initAudioRecorder() {
  try {
    // 前置兼容性检测
    if (!window.MediaRecorder) {
      throw new Error('MediaRecorder is not supported');
    }

    // 请求音频权限
    global.audioStream = await navigator.mediaDevices.getUserMedia({ 
      audio: true,
      video: false
    });
    global.audioChunks = [];

    // 确定兼容格式
    const supportedFormats = [
      'audio/mp4; codecs=mp4a.40.2',
      'audio/wav',
      'video/webm; codecs=vp8'
    ];
    let targetFormat = supportedFormats[0];
    for (const format of supportedFormats) {
      if (MediaRecorder.isTypeSupported(format)) {
        targetFormat = format;
        break;
      }
    }

    // 初始化录制器
    const recorder = new MediaRecorder(global.audioStream, { type: targetFormat });
    recorder.ondataavailable = (e) => {
      if (e.data.size > 0) {
        global.audioChunks.push(e.data);
      }
    };

    return recorder;
  } catch (err) {
    console.error('音频录制初始化失败:', err);
    throw err;
  }
}

额外注意事项 #

• Safari必须在HTTPS环境下（localhost除外）才能调用媒体设备API
• iOS Safari要求录制触发必须来自用户主动交互（比如按钮点击），不能在页面加载时自动执行
• 录制完成的音频文件，建议用MP4格式保证跨浏览器播放，WebM格式在Safari中播放支持有限

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