mediarecorder 是 html5 实现客户端音频录制的核心 api，需依次完成权限获取、媒体流创建、录制器初始化与状态控制。1. 调用 getusermedia({audio: true}) 获取 mediastream，须在用户交互后执行并处理拒绝；2. 用该流构造 mediarecorder，可指定 mimetype 并检查兼容性；3. 在 inactive 状态调用 start() 开始录制，stop() 后触发 dataavailable 事件获取 blob；4. 注意移动端限制、流占用、后台中断及 blob 元数据缺失等问题。
MediaRecorder 接口是 HTML5 中实现客户端音频录制的核心 API，无需后端即可捕获麦克风输入并生成 Blob 音频文件。调用流程关键在于权限获取、媒体流创建、录制器初始化与状态控制，每一步都有明确的依赖关系和常见陷阱。
1. 请求用户麦克风权限并获取 MediaStream
必须先通过 navigator.mediaDevices.getUserMedia() 获取音频流，这是所有后续操作的前提。该调用会触发浏览器权限弹窗，需在用户交互（如点击按钮）后发起，否则多数浏览器会拒绝。
- 只请求音频：传入
{ audio: true }，避免不必要的视频权限干扰 - 处理拒绝情况：用
catch捕获NotAllowedError或NotFoundError - 流对象需保存引用，后续要传给 MediaRecorder，且可选用于实时预览（如连接
<audio></audio>的srcObject）
2. 创建并配置 MediaRecorder 实例
拿到 MediaStream 后，用它构造 MediaRecorder。此时可指定 options.mimeType（如 "audio/webm;codecs=opus"），影响输出格式与兼容性；不指定时浏览器自动选择默认类型（通常为 webm/opus）。
- 检查浏览器支持：
MediaRecorder.isTypeSupported(mimeType)可提前验证目标格式是否可用 - Chrome 和 Edge 支持 opus（推荐）、aac；Firefox 支持 opus、vorbis；Safari 目前仅支持
audio/mp4（需 iOS 16.4+ / macOS 13.3+ 且需额外配置） - 创建后立即监听
dataavailable（接收 Blob 片段）和stop（录制结束）事件
3. 控制录制生命周期：start → stop → 处理数据
MediaRecorder 有明确的状态机：inactive → recording → inactive。只能在 inactive 状态下调用 start()，且 stop() 或 pause()/resume() 需在对应状态下执行。
-
start(timeslice?)：可传毫秒值（如1000）让其周期性触发dataavailable，便于分片上传或实时处理；不传则只在stop()时触发一次 - 录制中可通过
state属性判断当前状态，避免重复调用start() -
stop()后立即触发dataavailable，事件对象的data是Blob，合并多个片段可用new Blob(chunks, { type })
4. 常见问题与注意事项
实际开发中容易忽略底层约束，导致静音、报错或格式异常。
- 移动端 Safari 对自动播放/录音限制更严：必须在用户手势后调用
getUserMedia，且页面需处于前台 - 音频流若被其他标签页或应用占用（如 Zoom、系统录音），
getUserMedia可能静默失败或返回空轨道 - 录制期间关闭标签页或切到后台，部分浏览器会暂停录制或中断流；建议监听
visibilitychange提示用户 - 生成的 Blob 默认无文件名和元数据（如采样率、声道数），如需 WAV 等格式，需手动封装 RIFF 头，或借助第三方库（如
web-audio-recorder-js）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
