html录音必须先通过getusermedia()获取mediastream，否则mediarecorder无法工作；mediarecorder依赖有效流，流终止后需新建实例；web audio处理需mediastreamaudiodestinationnode中转，且safari支持有限。
HTML录音本身不“支持媒体流”——它依赖媒体流，没有 MediaStream 就根本录不了音。
getUserMedia() 是唯一合法入口
所有现代 HTML 录音都始于 navigator.mediaDevices.getUserMedia({ audio: true })。这不是可选步骤，而是强制前置条件。浏览器不会凭空给你音频数据，必须显式请求并获得用户授权后返回一个 MediaStream 实例。
常见错误现象：
- 直接 new MediaRecorder() 却没传 stream → 报错
TypeError: Failed to construct 'MediaRecorder': No media stream provided - 忘记 await 或 .then() 处理异步权限请求 →
stream为 undefined，后续全崩 - 在非安全上下文（http://）下调用 → 立即拒绝，连提示都不弹（Chrome 仅允许 https 或 localhost）
实操建议：
- 始终用
try/catch包裹getUserMedia()调用，捕获NotAllowedError、NotFoundError等典型错误 - 拿到
stream后，建议立刻赋值给全局变量或组件状态，避免被 GC 回收（尤其 React/Vue 中未正确保留引用时） - 若需兼容 Safari 11+，注意它不支持
audio: true单独请求，必须写成{ audio: true, video: false }或带空video约束
MediaRecorder 必须绑定有效 MediaStream
MediaRecorder 不是独立录音机，它只是把传入的 MediaStream “打包成 Blob”。流一旦结束或所有音轨被 stop()，MediaRecorder 就会立即进入 inactive 状态，再调 start() 会抛 InvalidStateError。
容易踩的坑：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在
mediaRecorder.stop()后，忘记手动调用stream.getTracks().forEach(t => t.stop())→ 麦克风持续占用，下次getUserMedia()可能失败或静音 - 误以为可以反复
start()/stop()同一个实例 → 实际上每次stop()后必须新建MediaRecorder实例才能再次使用 - 用
stream.clone()试图复用流 → 无效，clone 出的流仍共享底层轨道，stop 原始流后 clone 流也失效
实操建议：
- 每次开始新录制前，先检查
mediaRecorder.state是否为"inactive"，否则 new 一个新实例 - 监听
stream.oninactive事件，在流意外关闭时主动清理 recorder 和 UI 状态 - 如需多段连续录制，不要靠单个 recorder 分段，改用多个
MediaRecorder实例 + 时间戳对齐
MediaStream 可被 Web Audio API 二次加工
如果你不只是想录“原声”，而是要降噪、增益、混音或实时分析频谱，MediaStream 可以接入 AudioContext 构建处理图。但注意：这和 MediaRecorder 是两条路——你不能把经过 AudioContext 处理后的输出直接喂给 MediaRecorder，除非用 MediaStreamAudioDestinationNode 拿回新流。
关键差异点：
-
MediaRecorder录的是原始采集流（未经任何 JS 处理），保真度高、延迟低 -
AudioContext加工后录，需额外创建MediaStreamAudioDestinationNode，再用new MediaRecorder(destinationNode.stream)，性能开销明显增大 - Safari 对
MediaStreamAudioDestinationNode支持不稳定，iOS 16.4+ 才较可靠；Chrome/Firefox 支持较好
实操建议：
- 纯录音场景，绕过 Web Audio，直连
MediaRecorder—— 更稳、更快、更省电 - 需要实时效果（如讲话时加回声），用
MediaStreamAudioDestinationNode+MediaRecorder，但务必做 Safari 特判 - 若只需后期处理，不如录完再用
AudioContext.decodeAudioData()解码 Blob 处理，避开流同步难题
真正难的不是“怎么拿到流”，而是流生命周期管理：什么时候该 stop track，什么时候该 revoke object URL，什么时候该重试 getUserMedia。这些细节不出错，录音才真正可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
