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)
- 用于 标签预览：audioElement.src = url
- 用于下载：创建 标签，设置 href = url 和 download = "recording.webm"，再触发点击
- 使用完毕建议调用 URL.revokeObjectURL(url) 释放内存
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
