MediaRecorder API多浏览器兼容问题求助：Safari/Chrome/Edge异常排查

Safari 相关问题处理 #

1. Safari 自身录制报错 #

Safari 的 MediaRecorder 实验功能兼容性较差，核心问题在于编码格式支持有限：

• 优先使用 audio/mp4;codecs=mp4a-latm 格式录制，这是目前 Safari 实验性支持较好的编码。
• 录制前通过 MediaRecorder.isTypeSupported() 检测当前浏览器支持的格式，动态选择兼容编码，示例代码：

const supportedTypes = [
  'audio/mp4;codecs=mp4a-latm',
  'audio/webm;codecs=opus',
  'audio/wav'
];
const recordType = supportedTypes.find(type => MediaRecorder.isTypeSupported(type));
if (!recordType) throw new Error('当前浏览器不支持兼容的音频录制格式');
const mediaRecorder = new MediaRecorder(stream, { mimeType: recordType });

• 避免使用 Safari 不支持的编码（如纯 opus 编码的 WebM），否则会直接触发录制错误。

2. Chrome 录制音频无法在 Safari 播放 #

Chrome 默认录制的 WebM/opus 格式 Safari 完全不支持，解决方法：

• 统一使用跨浏览器兼容的 audio/mp4;codecs=mp4a-latm 格式录制，确保生成的音频在 Safari 中可解码。
• 如果必须保留 WebM 格式，需在服务端转码为 MP4 后再提供给 Safari 客户端。

Chrome & Edge 预加载问题处理 #

Chrome/Edge 中录制的音频无法预加载，核心原因是 WebM 格式的元数据存储在文件末尾，浏览器预加载时无法读取到时长等信息，导致 <audio> 标签显示为空：

• 切换为 audio/mp4;codecs=mp4a-latm 格式录制，MP4 元数据存储在文件头部，浏览器可在预加载时获取完整媒体信息。
• 若坚持使用 WebM 格式，可在录制完成后监听 <audio> 的 loadedmetadata 事件触发 UI 更新，同时手动触发加载：

const audio = document.querySelector('audio');
audio.src = URL.createObjectURL(recordedBlob);
audio.addEventListener('loadedmetadata', () => {
  // 此时已获取到音频时长等信息，可更新UI显示
  console.log('音频元数据加载完成，时长：', audio.duration);
});
audio.load();

• 确保 <audio> 标签设置正确的 preload 属性（如 preload="metadata" 或 preload="auto"）。

通用兼容优化 #

• 所有浏览器录制前都做格式检测，避免硬编码不兼容的 MIME 类型。
• 录制完成后，对生成的 Blob 做简单校验，比如检查大小是否合理，避免空Blob导致的播放错误。
• 测试时使用 Safari 最新版本，旧版本的实验性功能bug更多。

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