web speech api 的 speechrecognition 已在主流浏览器中被弃用：chrome 123+ 默认禁用且不可恢复，firefox 和 safari 从未实现；替代方案是 webrtc + 后端 asr（如 whisper），或使用 whisper.cpp wasm 本地运行。
Web Speech API 的 SpeechRecognition 在主流浏览器中已不被支持
Chrome 从 123 版本起默认禁用 SpeechRecognition（属于 Web Speech API），且没有开关可恢复；Firefox 和 Safari 压根没实现该接口。所谓“HTML5 原生语音转文字”在当前（2024 年中）已基本不可用，不是代码写错，而是底层能力被移除。
常见错误现象：ReferenceError: SpeechRecognition is not defined 或调用 new SpeechRecognition() 报 TypeError: Illegal constructor —— 这不是你漏了 polyfill，是浏览器直接砍掉了。
- 仅部分旧版 Chrome（≤122）、Edge（基于旧 Chromium 内核）可能仍能运行，但无 HTTPS 环境下会静默失败
-
webkitSpeechRecognition是 Chrome 旧私有接口，现已被标记为废弃，且同样依赖 HTTPS + 用户主动授权 - 所有现代移动浏览器（iOS Safari、Android Chrome）均不支持该 API
替代方案：用 WebRTC + 后端 ASR 服务（如 Whisper、Azure STT）
真正可行的路径是：前端用 MediaRecorder 录制音频流 → 转成 blob 或 ArrayBuffer → 上传至后端 ASR 接口 → 返回文本。这绕开了浏览器限制，也更可控。
关键实操点：
- 录制前必须获得用户麦克风权限：
navigator.mediaDevices.getUserMedia({ audio: true })，否则MediaRecorder初始化失败 - 推荐使用
audio/webm; codecs=opus格式，体积小、兼容性好，比 WAV 更适合上传 - 不要等录音结束才上传——可分块
ondataavailable上传，降低延迟；或用 WebSocket 流式推送原始 PCM（需后端配合） - 后端若用 OpenAI Whisper，注意其对采样率要求（通常 16kHz 单声道），前端需用
AudioContext重采样（非必须但推荐）
快速验证是否真能用：检查 window.SpeechRecognition 存在性只是第一步
即使 typeof SpeechRecognition !== 'undefined' 为 true，也不能说明可用。必须实际调用并监听 onstart 和 onerror 才能确认。
最小验证代码片段：
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
console.error('SpeechRecognition not supported');
} else {
const rec = new SpeechRecognition();
rec.onstart = () => console.log('listening...');
rec.onerror = (e) => console.error('Speech error:', e.error);
rec.start(); // 此时若报错，就是浏览器已禁用
}
多数情况下，这段代码会在 rec.start() 抛出 NotAllowedError 或直接静默失败——别怀疑自己，是浏览器策略变了。
如果你必须用纯前端方案，Whisper.cpp WASM 版是目前唯一较稳的选择
它把轻量 Whisper 模型编译为 WebAssembly，在浏览器本地运行，不发请求、不依赖后端，但代价是体积大（~50MB 模型文件）、首次加载慢、CPU 占用高。
使用前提和注意事项：
- 必须托管在 HTTPS 下（WASM +
fetch加载模型强制要求） - 模型文件需提前下载并缓存，否则每次识别都重新拉取，体验极差
- 只支持较小模型（如
tiny.en），准确率低于云端服务，尤其对口音、噪声敏感 - GitHub 上已有封装库如
@xenova/transformers，但需自行处理音频预处理（FFT、梅尔谱图等）
复杂点不在“怎么写”，而在“要不要承担模型加载、内存占用、识别延迟、多语言支持、错误降级”这一整套运维成本——多数业务场景里，走后端 ASR 更省心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
