HTML录音不能直接用MediaStream保存文件，必须通过MediaRecorder封装；格式需按浏览器兼容性选择webm/opus或mp4/AAC；需启用AGC等约束并用Web Audio动态调音；长时间录音要分段处理并及时释放内存。
HTML录音能直接用 MediaStream 吗
能，但不是“直接录”，而是必须通过 MediaRecorder 接口封装 MediaStream 才能真正落地。浏览器不提供原生 API 把 MediaStream 一键存成文件——你拿到的只是实时音频流，没经过编码、分块、封装，没法保存或传输。
常见错误现象：MediaStream 对象本身调 .toBlob() 报错；用 URL.createObjectURL(stream) 创建的链接无法播放或立即失效；尝试把 stream.getAudioTracks()[0] 直接喂给 File 构造函数失败。
- 必须先用
navigator.mediaDevices.getUserMedia({ audio: true })获取流 - 再传给
new MediaRecorder(stream)实例 - 手动监听
dataavailable事件收集Blob片段 - 最后用
new Blob(chunks, { type: 'audio/webm' })合并
MediaRecorder 录音格式和兼容性怎么选
格式选错是静音、卡顿、无法播放的主因。Chrome 和 Edge 默认用 audio/webm（VP8/Opus），Firefox 也支持但倾向 audio/ogg（Opus），Safari —— 直到 iOS 16.4 才开始有限支持 MediaRecorder，且只认 audio/mp4（AAC），还要求 MediaStream 来自真实麦克风（不能是 canvas.captureStream() 等模拟源）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先设
options = { mimeType: 'audio/webm; codecs=opus' }，覆盖 Chrome/Firefox 主流场景 - Safari 用户需降级 fallback：检测
MediaRecorder.isTypeSupported('audio/mp4')，支持才用 mp4，否则提示“请换浏览器” - 避免用
'audio/webm'不带 codecs，某些安卓 WebView 会默认选 VP9 导致解码失败 - 不要依赖
mediaRecorder.mimeType反推能力——它返回的是构造时指定值，不是实际生效值
录音过程中如何避免音量过低或爆音
浏览器默认不自动增益控制（AGC）或限制器，环境噪音、麦克风灵敏度、用户设备差异都会导致输出音量漂移。单纯靠 MediaStream 的 getAudioTracks()[0].applyConstraints() 只能设基础属性（如 echoCancellation: true），对响度无直接影响。
可行路径：
- 启用底层处理：在
getUserMedia里显式加约束{ autoGainControl: true, noiseSuppression: true, echoCancellation: true } - 用
Web Audio API接入：创建AudioContext→ctx.createMediaStreamSource(stream)→ 连GainNode动态调节，再送进MediaRecorder（注意需用MediaStreamAudioDestinationNode转回流） - 服务端后处理仍是刚需：前端无法可靠统一响度标准，导出后建议用 FFmpeg 做
-af loudnorm
容易踩的坑：Safari 不支持 autoGainControl 约束，设了也无效；Android Chrome 某些版本对 noiseSuppression 支持不稳定，开启后反而引入杂音。
长时间录音内存暴涨甚至崩溃怎么办
MediaRecorder 在 dataavailable 事件里积累的 Blob 片段如果不清空，会持续占内存——尤其 5 分钟以上录音，单个 Blob 可达 20MB+，GC 不及时就卡死标签页。
关键动作：
- 每次收到
dataavailable事件，立刻把event.datapush 到数组，然后清空引用（event.data = null） - 不要等
stop()再合并：改用pause()/resume()分段录制，每 30 秒触发一次合并 + 清空数组 - 用
URL.createObjectURL(blob)预览后，记得及时URL.revokeObjectURL(url)，否则 blob 一直驻留内存 - 极端场景可考虑
ReadableStream+TransformStream流式写入 IndexedDB，但兼容性差（仅 Chromium 110+）
真正难处理的是 iOS Safari：它既不支持 pause/resume，又对单次 MediaRecorder 时长敏感（常在 2–3 分钟后静音），只能靠定时 stop + restart 绕过，且要预留 200ms 间隔防止轨道冲突。
