React项目中Chrome录制的音频无法在Safari正常播放问题咨询

问题核心原因 #

你当前的问题根源是不同浏览器的MediaRecorder默认输出格式不一致，且你强制指定了不符合实际输出的MIME类型：

• Chrome平台的原生MediaRecorder并不支持audio/mpeg（MP3）编码，你硬给Blob指定type为audio/mpeg属于虚假标注，实际输出的是Chrome默认的audio/webm; codecs=opus格式，Safari对WebM/Opus的音频支持极差，因此无法播放。
• Safari平台的MediaRecorder原生支持MP3/AAC编码，输出的文件符合标准，因此可以同时在两个浏览器正常播放。

解决方案 #

方案1：优先使用跨浏览器兼容的编码格式（无需转码，首选方案） #

录制前先检测当前浏览器支持的MIME类型，选择兼容性最高的格式，不要硬编码audio/mpeg：

// 优先选择兼容性高的格式
const getSupportedMimeType = () => {
  const types = [
    'audio/mp4; codecs=aac',
    'audio/mpeg',
    'audio/webm; codecs=opus'
  ]
  return types.find(type => MediaRecorder.isTypeSupported(type)) || 'audio/webm'
}

// 录制部分调整
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mimeType = getSupportedMimeType()
const recorder = new MediaRecorder(stream, { mimeType });
recorder.addEventListener('dataavailable', ({ data }) => {
  // 这里Blob的type要和实际录制的mimeType一致，不要硬写audio/mpeg
  const audioBlob = new Blob([data], { type: mimeType });
  // 上传到服务器时，也要存储对应的mimeType，返回播放时响应头的Content-Type要匹配
});

同时要确保你的云存储服务支持Range请求：

• 云存储响应头要返回Accept-Ranges: bytes
• 响应音频文件时要支持206 Partial Content状态码，Safari对音频/视频资源强制要求支持分段加载，否则会触发stall事件无法播放。

方案2：统一转码为MP3格式（兼容性最好） #

如果需要全平台统一输出MP3格式，可以引入ffmpeg.wasm在前端把录制的音频转码为标准MP3后再上传：

// 引入ffmpeg.wasm示例
import { FFmpeg } from '@ffmpeg/ffmpeg';
const ffmpeg = new FFmpeg();
await ffmpeg.load();

// 录制完成后转码
recorder.addEventListener('stop', async () => {
  // 先拿到录制的blob
  const recordedBlob = new Blob(recordedChunks, { type: mimeType });
  // 把blob写入ffmpeg虚拟文件系统
  const arrayBuffer = await recordedBlob.arrayBuffer();
  ffmpeg.FS('writeFile', 'input', new Uint8Array(arrayBuffer));
  // 转码为mp3
  await ffmpeg.run('-i', 'input', '-acodec', 'libmp3lame', 'output.mp3');
  // 读取转码后的mp3文件
  const mp3Data = ffmpeg.FS('readFile', 'output.mp3');
  const mp3Blob = new Blob([mp3Data.buffer], { type: 'audio/mpeg' });
  // 上传mp3Blob到服务器
})

转码后的标准MP3文件可以在所有浏览器正常播放。

播放端调整 #

播放前可以先检测当前浏览器是否支持该音频格式，做降级提示，同时如果是动态创建Audio实例，建议设置crossOrigin属性如果资源是跨域的：

const play = (url: string) => {
  if (!audioInstanceRef.current) return;
  audioInstanceRef.current.crossOrigin = 'anonymous'; // 跨域资源需要配置
  audioInstanceRef.current.src = url;
  audioInstanceRef.current.play().catch(err => {
    // 处理播放失败，比如提示用户换浏览器或者下载播放
    console.error('播放失败', err)
  });
};

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