如何在HTML5中通过MediaRecorder接口捕获麦克风音频并生成录音文件-H5教程-PHP中文网

html5中mediarecorder录制麦克风音频需四步：1. 安全上下文下调用getusermedia({audio:true})获取授权音频流；2. 用istypesupported检测后创建mediarecorder实例；3. 监听dataavailable收集blob片段，stop后合并为完整blob；4. 通过audio标签播放或a标签下载，safari需注意兼容性及mp3需转码。

如何在html5中通过mediarecorder接口捕获麦克风音频并生成录音文件

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

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

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)）