JavaScript语音识别主要依赖Web Speech API的SpeechRecognition接口,但仅Chromium系浏览器(Chrome、Edge、Opera)稳定支持,Firefox、Safari及多数国产浏览器不支持,且须HTTPS环境(localhost除外)。

JavaScript 实现语音识别主要依靠 Web Speech API 中的 SpeechRecognition 接口(现多称 SpeechRecognition 或 Chrome 下的 webkitSpeechRecognition),但它不是全平台可用的标准 API,兼容性有明显局限。
当前主流浏览器支持情况
截至 2024 年,仅 Chromium 内核浏览器(Chrome、Edge、Opera)稳定支持语音识别功能,且需 HTTPS 环境(localhost 除外)。Firefox、Safari、Samsung Internet 均未实现该接口,调用会直接报错或返回 undefined。
- ✅ Chrome 25+(需
webkitSpeechRecognition前缀) - ✅ Edge 79+(Chromium 版,支持标准
SpeechRecognition) - ❌ Firefox:无实现,
window.SpeechRecognition为undefined - ❌ Safari:不支持,iOS/macOS 全系不可用
- ❌ 部分国产浏览器(如微信内置浏览器、QQ 浏览器 X5 内核)也不支持
基础使用方式(以 Chrome 为例)
需先检测 API 是否可用,再创建实例并配置行为:
if ('webkitSpeechRecognition' in window) {
const recognition = new webkitSpeechRecognition();
recognition.continuous = false; // 识别一次后停止
recognition.interimResults = true; // 返回中间结果
recognition.lang = 'zh-CN'; // 设置中文
recognition.onresult = (event) => {
const transcript = Array.from(event.results)
.map(result => result[0].transcript)
.join('');
console.log('识别结果:', transcript);
};
recognition.onerror = (event) => {
console.error('语音识别出错:', event.error);
};
recognition.start(); // 触发麦克风权限请求并开始识别
} else {
console.warn('当前浏览器不支持语音识别');
}
关键限制与注意事项
即使在支持的浏览器中,也有几个无法绕过的核心限制:
立即学习“Java免费学习笔记(深入)”;
- 必须 HTTPS(或 localhost):HTTP 页面会静默失败,控制台可能无提示
-
用户需主动授权麦克风:首次调用
start()才触发权限弹窗,拒绝后需手动开启 - 无后台持续识别能力:页面失焦或切换标签页时,识别常被中断
- 无离线识别支持:所有音频上传至 Google 服务器处理(隐私敏感场景需谨慎)
-
无官方 TypeScript 类型定义:需手动声明或引入社区类型包(如
@types/web-speech-api)
替代方案建议
若需更广兼容性或更高可控性,可考虑以下路径:
-
WebRTC + 第三方 ASR 服务:用
MediaRecorder录制音频,转成 Blob 后上传至阿里云语音识别、腾讯云 ASR、Azure Speech 等 API - Electron / Tauri 桌面应用:通过 Node.js 调用系统级语音工具(如 Windows SAPI、macOS SpeechRecognizer)
- 移动端混合开发:在 React Native 或 Flutter 中调用原生语音识别模块(Android SpeechRecognizer / iOS SFSpeechRecognizer)
Web Speech API 的语音识别能力实用但脆弱,适合实验性项目或 Chrome 内部工具;生产环境建议优先评估兼容性需求,再决定是否降级为录音上传方案。











