如何利用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（部分浏览器需手动封装）。