html5 mediarecorder api可在浏览器中直接录音并生成blob或base64，无需后端；流程包括：1. https或localhost下请求麦克风权限获取mediastream；2. 用该流创建mediarecorder实例（推荐audio/webm），监听dataavailable事件收集blob片段；3. stop后合并blob，通过url.createobjecturl播放或a标签下载；4. 可选转base64实现前端分享。
用 HTML5 的 MediaRecorder API 可以在浏览器中直接录音，无需插件或后端支持；录完还能转成 Blob 或 Base64，方便上传、播放和分享。
一、获取麦克风权限并初始化录音流
必须先请求用户授权访问麦克风，再创建媒体流。注意：仅 HTTPS 环境或 localhost 下可用，HTTP 页面会静默失败。
- 调用 navigator.mediaDevices.getUserMedia({ audio: true }) 获取音频流
- 检查返回的 MediaStream 是否有效，避免空流导致 Recorder 初始化失败
- 可选：用 AudioContext 分析音量（如做录音电平指示）
二、使用 MediaRecorder 录制与控制
MediaRecorder 是核心接口，负责将流转化为可处理的音频数据块。它不直接生成完整文件，而是通过 dataavailable 事件分段输出 Blob。
- 创建实例：new MediaRecorder(stream, { mimeType: 'audio/webm' })（推荐 webm，兼容性好且体积小）
- 监听 start、stop、dataavailable 事件，把每次触发的 Blob 存入数组
- 调用 start() 开始录音，stop() 或 pause() 控制流程（注意 pause 在部分浏览器中支持有限）
三、合成音频文件并提供下载/播放
录制结束后，把所有 Blob 合并为一个完整音频文件，才能正常播放或下载。
- 用 new Blob(chunks, { type: 'audio/webm' }) 合并所有分段数据
- 生成 URL：URL.createObjectURL(blob)，赋给 的 src 即可播放
- 下载时，创建隐藏 标签，设置 href 和 download 属性后自动点击
四、简单分享功能（前端可实现）
若暂不接入后端，可用客户端方式生成可分享链接：把音频转为 Base64 字符串，拼入 URL 参数或嵌入页面二维码中。
- 用 FileReader.readAsDataURL(blob) 获取 Base64 字符串（注意长度限制，短录音较安全）
- 生成分享页 URL，例如：share.html?audio=data:audio/webm;base64,...
- 在分享页解析 URL 参数，还原 Blob 并播放（需处理长 Base64 截断或使用压缩编码）
不复杂但容易忽略：录音前检测浏览器兼容性（Safari 直到 14.1 才支持 MediaRecorder），移动端需额外处理自动播放策略（如首次用户交互后才允许播放录音）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
