如何利用HTML5 MediaRecorder接口捕捉麦克风音频并生成录音文件？

本文共计759个文字，预计阅读时间需要4分钟。

在HTML5中使用`MediaRecorder`接口录制麦克风声音，核心是首先获取用户授权的音频流（`MediaStream`），然后用`MediaRecorder`捕捉并导出为可下载的音频文件（如WAV或MP3）。整个过程无需后端支持，纯前端实现。

1. 请求麦克风权限并获取音频流

必须通过 navigator.mediaDevices.getUserMedia() 获取用户许可。注意只请求音频（{ audio: true }），避免不必要的视频权限弹窗。

• 需在安全上下文（HTTPS 或 localhost）中运行，否则浏览器会拒绝调用
• 建议添加错误处理，捕获用户拒绝、设备不可用等常见异常
• 示例代码片段：

let stream; try { stream = await navigator.mediaDevices.getUserMedia({ audio: true }); } catch (err) { console.error("无法访问麦克风：", err.name, err.message); return; }

2. 创建并配置 MediaRecorder 实例

MediaRecorder 构造函数接收音频流，并可指定 mimeType 控制输出格式。浏览器支持程度不同，推荐优先尝试 audio/webm（广泛支持、含 Opus 编码），再降级到 audio/wav（部分浏览器需手动封装）。

• Chrome / Edge 支持 audio/webm;codecs=opus，录制质量高、体积小
• Safari 目前仅支持 audio/mp4（需 iOS 16.4+ / macOS 13.3+），且需额外处理（如用 FFmpeg.wasm 转码）
• 不要硬编码不支持的类型，可用 MediaRecorder.isTypeSupported() 检测

3. 开始录制、收集数据块并生成 Blob 文件

录制过程依赖三个关键事件：start、dataavailable（每次有新音频块）、stop。所有 dataavailable 触发的 event.data 是 Blob 片段，需存入数组，最后合并为完整音频文件。

立即学习“前端免费学习笔记（深入）”；

• 在 dataavailable 中将 event.data 推入 chunks = []
• 调用 recorder.stop() 后触发 stop 事件，此时用 new Blob(chunks, { type: mimeType }) 合成最终文件
• 可立即创建 URL 并用于播放或下载（URL.createObjectURL(blob)）

4. 提供播放与下载功能

生成 Blob 后，可通过 <audio> 标签预览录音，也可构造 <a download="recording.webm"> 链接实现一键下载。

• 下载前确保设置正确的 type 和文件扩展名（如 .webm 对应 audio/webm）
• 移动端注意：Safari 对自动下载有限制，建议引导用户长按链接保存
• 若需 MP3，前端需借助第三方库（如 ffmpeg.wasm）转码，无法直接由 MediaRecorder 输出