MediaRecorder 录制音频需通过监听 dataavailable 事件收集 Blob 分片到数组,stop 前调用 requestData() 并等待 onstop 后合并为新 Blob,指定 type 如 'audio/webm;codecs=opus',再用 URL.createObjectURL 生成可播放/下载链接。

MediaRecorder 录制的音频数据天然以 Blob 片段形式产出,导出为完整 Blob 的关键不是“转换”,而是**正确收集、合并与封装**。整个过程在浏览器内存中完成,无需后端参与。
监听 dataavailable 事件收集分片
每次有音频数据可读时(如每秒、每帧或录制结束),MediaRecorder 会触发 dataavailable 事件,event.data 就是一个原始音频 Blob 片段:
- 必须提前声明一个空数组(如 let audioChunks = [])用于存储
- 在事件回调中直接推入:audioChunks.push(event.data)
- 注意检查 event.data.size > 0,避免空片段干扰合并
确保 stop 后完成数据捕获
调用 recorder.stop() 会立即触发最后一次 dataavailable,但极短录音可能因缓冲未刷新而丢失末尾数据:
- 可在 stop 前主动调用 recorder.requestData(),强制输出当前缓冲内容
- stop 后务必等待 onstop 事件执行,再进行合并操作
- 验证 audioChunks.length > 0,否则说明未录到有效音频
用 new Blob() 合并并指定正确类型
所有分片合并为一个可用 Blob,type 参数决定文件格式和后续兼容性:
立即学习“前端免费学习笔记(深入)”;
- 推荐使用 'audio/webm;codecs=opus':体积小、音质好、Chrome/Firefox 原生支持
- 若需 WAV 格式(如做简单编辑),可用 'audio/wav',但注意并非所有浏览器都支持该 mimeType 录制(实际多由 WebM 转换而来)
- 合并写法:const blob = new Blob(audioChunks, { type: 'audio/webm' })
生成 URL 并用于播放或下载
Blob 本身不可直接访问,需转为临时 URL 才能使用:
- 创建可访问链接:const url = URL.createObjectURL(blob)
- 用于 <audio> 标签预览:audioElement.src = url
- 用于下载:创建 <a> 标签,设置 href = url 和 download = "recording.webm",再触发点击
- 使用完毕建议调用 URL.revokeObjectURL(url) 释放内存



















