实现高质量语音输入的关键是“采得准、压得稳、传得清”；需合理配置采样率与位深（如16000Hz+16bit为主流），优先使用MediaRecorder API录制WebM（Opus），在用户手势触发下申请麦克风权限，并与后端协同统一处理流程。
要实现高质量语音输入，关键不在“录得响”，而在“采得准、压得稳、传得清”。HTML5 提供的底层能力足够支撑专业级语音采集，但需合理配置参数并规避常见陷阱。
采样率与位深：语音场景的黄金组合
采样率决定频率响应范围，位深影响动态范围和信噪比。对语音输入而言，并非越高越好：
- 8000 Hz 采样率 + 16 bit 位深：适用于电话语音、客服对话等窄带语音，文件小、传输快，兼容性极佳
- 16000 Hz 采样率 + 16 bit：当前主流选择，兼顾清晰度与体积，适配大多数 ASR 引擎（如百度语音、阿里云ASR）
- 44100 Hz 采样率：仅在需要保留高频辅音（如“s”“sh”）或做后期降噪时使用，会显著增大文件体积和处理开销
MediaRecorder API：现代录音的首选方案
相比老旧的 ScriptProcessorNode 方式，MediaRecorder 更轻量、更标准、更易维护：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 直接生成 Blob 数据，无需手动拼接 Float32Array
- 支持指定 mimeType，如
"audio/webm;codecs=opus"（推荐）、"audio/wav"或"audio/mp4" - 通过
ondataavailable事件分块获取音频数据，便于流式上传或实时处理 - 注意：部分安卓 WebView 对
audio/wav支持不完整，建议优先测试webm格式
权限与时机：避免“静音失败”的核心细节
浏览器拒绝麦克风权限，往往不是用户点了“禁止”，而是调用时机不当：
立即学习“前端免费学习笔记（深入）”；
- 必须在用户手势（如 click、touchstart）触发的上下文中调用
navigator.mediaDevices.getUserMedia({ audio: true }) - 不要在页面加载完成时自动请求；也不要放在 setTimeout 延迟中——会被视为非交互触发
- 首次请求失败后，再次调用前建议检查
MediaStreamTrack.enabled状态，避免重复无效请求 - 可在按钮文案中明确提示：“点击开始，授权麦克风”——提升用户授权意愿
格式选择与后端协同：别让前端“独自美丽”
前端录什么格式，取决于后端能否高效解码和识别：
- WebM（Opus）：体积小、压缩率高、延迟低，适合实时识别；但需后端支持 Opus 解码（FFmpeg 可轻松处理）
- WAV（PCM）：无损、免解码，ASR 接口最友好；但体积大，上传耗时长，移动端易卡顿
- MP3：兼容性最好，但编码需额外 JS 库（如 lamejs），CPU 占用高，不推荐用于实时场景
- 建议统一约定：前端录制 WebM，后端转成 16kHz 单声道 PCM 再送 ASR，兼顾效率与准确率
