MediaRecorder 是 HTML5 实现网页音频录制的标准方案，需依次完成请求麦克风权限、创建配置录制器、控制启停收集数据、合并 Blob 导出文件四步，每步均有关键约束与异常处理。
MediaRecorder 是 HTML5 中实现网页端音频录制最直接、最标准的方案，整个流程清晰但每步都有关键约束，稍有疏忽就可能静音、报错或格式不兼容。
1. 请求麦克风权限并获取音频流
这是所有操作的前提，必须在用户主动触发（如点击按钮）后执行，且只能在 HTTPS 或 localhost 环境下工作。
- 调用
navigator.mediaDevices.getUserMedia({ audio: true })，建议开启基础降噪：{ audio: { echoCancellation: true, noiseSuppression: true } } - 捕获拒绝异常：如
NotAllowedError（用户点拒绝）、NotFoundError（没插麦克风） - 拿到
MediaStream后务必保存引用，后续要传给 MediaRecorder，也可用于实时预览（比如设为<audio>的srcObject）
2. 创建并配置 MediaRecorder 实例
流拿到手后才能初始化录制器，此时可指定格式和编码参数，直接影响输出质量和浏览器兼容性。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 推荐 mimeType：
"audio/webm;codecs=opus"（Chrome/Firefox 全支持，体积小、音质好） - 可用
MediaRecorder.isTypeSupported(mimeType)提前检测是否支持，避免运行时报错 - 可设置码率：
audioBitsPerSecond: 128000（约 128kbps），平衡大小与音质 - 立即监听
dataavailable（接收 Blob 片段）和stop（录制结束）事件
3. 控制录制启停与收集数据
MediaRecorder 有明确状态机（inactive → recording → inactive），操作必须符合当前状态，否则会抛错。
立即学习“前端免费学习笔记（深入）”；
- 只能在
inactive状态下调用start()；stop()后自动回到inactive - 调用
start(1000)可让其每秒触发一次dataavailable，适合分片上传或实时处理 - 每次
dataavailable事件中，把event.data（Blob）推入数组（如audioChunks = []） - 停止后务必检查
audioChunks.length > 0，为空说明未录到有效数据，常见于流未正确连接或权限失效
4. 合并 Blob 并导出为可下载文件
录制结束后的 Blob 片段需合并成完整文件，再生成临时 URL 实现下载。
- 合并：
const blob = new Blob(audioChunks, { type: "audio/webm" }) - 生成 URL：
const url = URL.createObjectURL(blob) - 创建
<a>标签，设置href和download属性（如"recording.webm"），再触发点击 - 录制完成后，记得调用
stream.getTracks().forEach(t => t.stop())释放麦克风资源，避免后台持续占用
