MediaRecorder 不直接指定编码格式,仅按 mimeType 录制;应优先检测并使用 'audio/webm;codecs=opus',Safari 降级为 'audio/mp4;codecs="aac"',MP3 需服务端转码。

HTML5 MediaRecorder 本身不提供直接指定音频编码格式(如 AAC、Opus、MP3)的 API,其输出格式和编码由浏览器内部自动决定,取决于底层媒体栈支持及 MediaRecorder.isTypeSupported() 的能力检测结果。
浏览器实际支持的音频编码格式
不同浏览器对 MediaRecorder 的音频编码实现差异较大:
-
Chrome / Edge(Chromium 内核):默认使用
audio/webm;codecs=opus(WebM 容器 + Opus 编码),Opus 是首选且质量高、延迟低;也支持audio/webm;codecs=pcm(未压缩 PCM,仅限部分版本,体积大)。 -
Firefox:同样以
audio/webm;codecs=opus为主,稳定支持 WebM+Opus;不支持 MP3 或 AAC 封装。 -
Safari(macOS/iOS):仅支持
audio/mp4;codecs=avc1.42E01E?错——Safari 实际只支持audio/mp4容器,但音频必须为 AAC 编码(即audio/mp4;codecs="aac"),且需注意:iOS Safari 直到 iOS 16.4 才开始支持MediaRecorder,且仅限 AAC 编码的 MP4。
如何检查并选择可用的 mimeType
不能硬写 "audio/mp4;codecs=aac",必须先验证浏览器是否支持:
const supported = MediaRecorder.isTypeSupported('audio/mp4;codecs="aac"');
console.log(supported); // true 仅在 Safari(较新版本)返回 true
常用可检测组合:
立即学习“前端免费学习笔记(深入)”;
-
"audio/webm"(默认,隐含 Opus) -
"audio/webm;codecs=opus"(明确声明,推荐) -
"audio/webm;codecs=pcm"(极少支持,不实用) -
"audio/mp4;codecs=aac"(Safari 专用,注意引号写法:codecs="aac"或codecs=aac均可,但建议用双引号包裹)
设置 mimeType 的实际操作建议
为兼容多端,应动态选择最优 mimeType:
- 优先尝试
"audio/webm;codecs=opus"(Chrome/Firefox/Edge 主流支持) - 若失败或检测到 Safari,则降级为
"audio/mp4;codecs=aac" - 避免使用
"audio/wav"—— 多数浏览器不支持录制为 WAV(仅部分桌面 Chrome 可通过audio/webm;codecs=pcm模拟,但非标准) - 不要省略
codecs参数:仅写"audio/webm"可能因浏览器策略导致编码不可控(例如意外用 VP8 音频轨道)
后续处理:获取编码信息与转码必要性
录制完成的 Blob 无法直接读取内部编码参数,但可通过以下方式间接确认:
- 用
Blob.type查看 mimeType(如"audio/webm"),但不等于真实编码 - 服务端接收后,用 FFmpeg 检查:
ffprobe -v quiet -show_entries stream=codec_name -of default file.webm - 如需统一为 MP3/AAC 交付用户,必须在服务端转码(
MediaRecorder无法前端生成 MP3)



















