纯前端用mediarecorder录制麦克风音频为webm文件，需用户手势触发获取音频流、选用audio/webm; codecs=opus mimetype、收集dataavailable分片、合并导出blob并生成下载链接。
直接用 MediaRecorder 录制麦克风音频并存为 WebM 文件，整个过程纯前端、无需服务端参与。关键在于获取合法音频流、选对 mimeType、正确收集分片并合并导出。
获取用户授权的音频流
必须在用户手势（如点击按钮）触发下调用 `navigator.mediaDevices.getUserMedia({ audio: true })`，不能在页面加载时自动请求。 - 只请求音频权限，避免干扰用户：`{ audio: true }` - 确保运行在 HTTPS 或 localhost 环境，否则浏览器会拒绝 - 捕获常见错误：`NotAllowedError`（用户拒绝）、`NotFoundError`（无可用麦克风）创建支持 WebM 的录制器
优先使用 `audio/webm; codecs=opus`，这是目前兼容性最好、音质体积比最优的组合： - 先检测支持性：`MediaRecorder.isTypeSupported('audio/webm; codecs=opus')` - 若不支持，降级为 `'audio/webm'`（默认 Opus）或 `'audio/wav'`（兼容性强但体积大） - 不要硬写 `'audio/mp3'`——所有主流浏览器都不支持该 mimeType录制与分片收集
MediaRecorder 是事件驱动的，核心逻辑围绕三个事件展开： - 监听 `dataavailable`：每次触发时把 `event.data`（Blob）推入数组 `chunks = []` - 调用 `recorder.start()` 开始，`recorder.stop()` 结束（可绑定按钮控制） - 停止后监听 `stop` 事件，在回调中检查 `chunks.length > 0`，防止空文件 - 可选：结束前调用 `recorder.requestData()`，避免末尾音频丢失导出可播放的 WebM 文件
将分片合并为完整 Blob，再生成下载链接： - 合并：`const blob = new Blob(chunks, { type: 'audio/webm' })` - 创建 URL：`const url = URL.createObjectURL(blob)` - 构造 `` 标签，设置 `href=url` 和 `download="recording.webm"`，然后触发点击 - WebM + Opus 可被 Chrome、Firefox、Edge、Safari（iOS 14+/macOS 12+）、微信、钉钉等直接播放，无需转码不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
