用MediaRecorder实现网页语音留言需三步闭环：先请求麦克风权限获取MediaStream，再用其初始化MediaRecorder并录制为Blob，最后释放音轨避免后台录音；Blob可直接播放、本地缓存或上传。
用 MediaRecorder 实现网页语音留言，核心是捕获麦克风音频、录制为 Blob、再上传或本地回放。整个流程不依赖后端即可完成基础功能，适合轻量级留言板场景。
获取用户麦克风权限并创建媒体流
必须先请求用户授权访问麦克风，这是所有操作的前提。调用 navigator.mediaDevices.getUserMedia({ audio: true }) 获取音频流，注意处理拒绝权限的异常情况：
- 若用户拒绝，
getUserMedia会抛出NotAllowedError，需提示用户手动开启权限 - 成功后得到
MediaStream对象，可直接传给MediaRecorder，无需额外处理 - 建议在按钮点击等用户手势触发后调用，避免被浏览器静默拦截
初始化 MediaRecorder 并开始/停止录制
拿到流后，用它实例化 MediaRecorder，推荐使用 audio/webm 或 audio/mp4（部分浏览器支持）作为 mimeType：
const recorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });- 监听
dataavailable事件获取录制完成的音频块（Blob），合并为完整音频文件 - 调用
recorder.start()开始录制；recorder.stop()结束并触发dataavailable - 录制中可监听
recording状态，用视觉反馈（如红点动画）提示用户正在录音
保存与回放录音文件
录制结束生成的 Blob 可直接用于播放或暂存，无需立即上传：
- 用
URL.createObjectURL(blob)创建临时 URL，赋值给的src即可播放 - 可将
blob存入localStorage（注意大小限制，通常 ≤5MB），或转为 base64 字符串缓存 - 若需上传，用
FormData将Blob附加到表单中，通过fetch发送到后端接口 - 每次新录音前记得调用
recorder.stream.getTracks().forEach(t => t.stop())清理音轨，避免麦克风持续占用
简易留言板界面整合示例
一个实用的留言区包含：录音按钮、暂停/取消按钮、播放控件、留言列表。关键逻辑如下：
- 点击“开始录音” → 请求权限 → 初始化 Recorder → 调用
start() - 点击“停止” → 调用
stop()→ 收集dataavailable的 Blob → 生成播放链接并追加到列表 - 每条留言 DOM 中嵌入
，src指向对应 Blob URL - 页面卸载前调用
stream.getTracks().forEach(t => t.stop())防止后台录音
不复杂但容易忽略的是流的生命周期管理——没正确关闭轨道会导致浏览器地址栏麦克风图标常亮，影响用户体验。只要权限、录制、释放三步闭环做好，一个可用的语音留言功能就完成了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
