Web Speech API 的 SpeechRecognition 是浏览器原生唯一语音识别接口,仅 Chromium 内核稳定支持,需 HTTPS 或 localhost 环境、用户手势触发,且不支持 iOS;Firefox 几乎不可用,替代方案应依赖后端 ASR 或离线 WASM 模型。

Web Speech API 的 SpeechRecognition 是唯一可用的语音识别接口
浏览器原生支持的语音识别能力,目前只有 SpeechRecognition(部分浏览器中叫 webkitSpeechRecognition)这一个接口。它不是“多个 API 供你选”,而是 Web Speech API 规范中定义的**唯一语音识别构造器**。其他所谓“语音识别 API”要么是第三方 SDK 封装,要么是服务端 ASR 接口,不属于浏览器原生能力。
注意:该接口仍处于 W3C 工作草案阶段,且**仅在安全上下文(https:// 或 localhost)中可用**;HTTP 页面直接调用会静默失败。
如何创建并启动一次基础识别
必须通过 new webkitSpeechRecognition()(Chrome/Edge)或 new SpeechRecognition()(Firefox 实验性支持,实际几乎不可用)获取实例。主流稳定支持仅限 Chromium 内核。
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.continuous = false; // 单次识别后自动停止
recognition.interimResults = false; // 不返回中间结果
recognition.lang = 'zh-CN'; // 显式指定语言,否则可能识别不准
recognition.onresult = (event) => {
const transcript = event.results[0][0].transcript;
console.log('识别结果:', transcript);
};
recognition.onerror = (event) => {
console.error('识别错误:', event.error);
};
recognition.start(); // 必须由用户手势触发(如 click),不能自动调用
-
recognition.start()必须由用户显式交互(如按钮点击)触发,否则 Chrome 会拒绝执行 -
lang参数强烈建议设置,尤其中文场景不设可能 fallback 到 en-US,识别率骤降 -
interimResults: true会触发多次onresult,但中间结果不稳定,慎用于生产逻辑判断
常见失败原因和兼容性陷阱
90% 的“识别没反应”问题都源于环境或调用时机错误,而非代码本身。
立即学习“Java免费学习笔记(深入)”;
- 在
http://非本地非 HTTPS 页面调用 → 控制台无报错,但start()直接静默忽略 - 未由用户手势触发
start()(例如在setTimeout或页面加载后自动调)→ Chrome 报错NotAllowedError: Speech recognition permission denied - 用户未授麦克风权限 →
onerror触发,event.error === 'not-allowed',需引导用户手动开启 - Firefox 宣称支持
SpeechRecognition,但实际未启用,typeof SpeechRecognition === 'undefined' - 移动端 Chrome(Android)支持,但 iOS Safari 完全不支持该 API,且无替代方案
替代方案:什么时候不该用 Web Speech API
如果你需要:离线识别、高准确率中文长句、实时流式识别、多语言混合、或支持 iOS —— Web Speech API 就不合适。
这时应考虑:
- 调用后端 ASR 服务(如阿里云智能语音交互、腾讯云语音识别),前端只负责录音 + 上传音频 blob
- 使用 WebAssembly 加载轻量级离线模型(如
@picovoice/porcupine做唤醒词,配合whisper.cppwasm 版本做识别 —— 但延迟和资源占用高) - 接受限制:仅在桌面 Chrome/Edge 上提供语音输入入口,iOS 和 Firefox 用户降级为键盘输入
真正稳定的语音识别体验,从来不在浏览器单点 API 里,而在服务端能力 + 客户端合理兜底的组合里。











