MediaRecorder录制保存音频的正确MIME类型及转MP3方案咨询

浏览器原生MediaRecorder受版权限制，几乎不支持audio/mpeg（MP3格式），直接设置该类型必然触发“文件类型不支持”的错误。以下是具体解决方案：

一、浏览器原生支持的紧凑音频格式 #

优先选用这些浏览器普遍兼容、体积紧凑的格式，无需额外转码即可直接播放：

• WebM + Opus：audio/webm; codecs=opus —— 压缩率极高，Chrome、Firefox、Edge等现代浏览器全支持，是短音频的最优选择
• MP4 + AAC：audio/mp4; codecs=mp4a.40.2 —— 兼容性更广，除浏览器外多数本地播放器也能直接识别，压缩效果也不错

可以提前用代码检测浏览器支持情况：

// 检测WebM Opus支持
if (MediaRecorder.isTypeSupported('audio/webm; codecs=opus')) {
  // 优先使用该类型
}
// 检测MP4 AAC支持
if (MediaRecorder.isTypeSupported('audio/mp4; codecs=mp4a.40.2')) {
  // 作为降级方案
}

二、若必须输出MP3格式 #

如果业务强制要求MP3，有两种可行方案：

• 前端转码：借助lamejs、opus-recorder等JS库，在浏览器内将录制好的WebM/MP4音频转成MP3。适合短音频，缺点是会消耗前端性能
• 服务器转码：将前端录制的WebM/MP4文件上传到服务器，用FFmpeg等工具批量转成MP3。这种方案更稳定，适合大量音频处理场景

示例代码（WebM Opus优先） #

const preferredOptions = { mimeType: "audio/webm; codecs=opus" };
let mediaRecorder;

if (MediaRecorder.isTypeSupported(preferredOptions.mimeType)) {
  mediaRecorder = new MediaRecorder(stream, preferredOptions);
} else {
  // 降级到MP4 AAC
  const fallbackOptions = { mimeType: "audio/mp4; codecs=mp4a.40.2" };
  mediaRecorder = new MediaRecorder(stream, fallbackOptions);
}

// 后续录制、保存逻辑...

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