JavaScript语音识别主要依靠Web Speech API的SpeechRecognition接口,仅Chromium内核浏览器原生支持,无需后端、不传语音至服务器;需HTTPS环境、用户授权麦克风,支持中文但精度有限。

JavaScript 实现语音识别主要靠 Web Speech API 中的 SpeechRecognition 接口(目前仅 Chromium 内核浏览器如 Chrome、Edge 原生支持,Firefox 和 Safari 尚未实现)。它不是调用第三方服务,而是直接使用浏览器内置的语音识别引擎,无需后端、不传语音到服务器,适合简单场景。
基础用法:创建并启动识别器
先检查浏览器兼容性,再初始化识别实例:
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.continuous = false; // 识别一次后停止
recognition.interimResults = true; // 返回中间结果(实时显示)
recognition.lang = 'zh-CN'; // 设置中文识别
recognition.onresult = function(event) {
const transcript = Array.from(event.results)
.map(result => result[0])
.map(result => result.transcript)
.join('');
console.log('识别结果:', transcript);
};
recognition.onerror = function(event) {
console.error('识别出错:', event.error);
};
recognition.start(); // 开始监听麦克风
} else {
console.warn('当前浏览器不支持 Web Speech API');
}
关键配置项说明
几个常用属性直接影响体验:
-
continuous:设为
true可持续识别(说完停顿后自动继续),适合长对话;设为false(默认)则只识别一次就结束 -
interimResults:开启后会在最终结果前返回带
isFinal: false的临时文本,可用于“边说边显示”效果 -
lang:必须显式指定语言代码,如
'zh-CN'、'en-US',否则可能识别不准或 fallback 到英文 - maxAlternatives:控制每段语音返回多少个候选结果(默认 1,最大通常为 10)
常见交互控制与事件
除了 onresult 和 onerror,这些事件帮你做更自然的 UI 反馈:
立即学习“Java免费学习笔记(深入)”;
- onstart:麦克风已启用,可显示“正在听…”状态
- onsoundstart / onsoundend:检测到声音开始/结束,适合做声波动画
-
onend:识别会话结束(可能是超时、出错或手动调用
stop()),此时可自动重启识别(配合continuous = false实现循环) - stop():立即停止识别并返回已有结果;abort():丢弃所有结果并终止
注意事项和限制
Web Speech API 不是万能方案,实际使用中需注意:
- 仅在 HTTPS 或
localhost下可用(HTTP 页面会被浏览器拒绝访问麦克风) - 用户首次使用需手动授权麦克风权限,建议加引导文案
- 识别质量依赖环境噪音、口音、语速;中文支持较英文弱,长句或专业词汇易出错
- 移动端支持不稳定(iOS Safari 完全不支持,Android Chrome 支持但常被系统省电策略中断)
- 无标点自动添加,返回纯文本,需自行处理断句或后处理
如果需要更高准确率、离线支持或跨平台稳定运行,建议搭配 WebAssembly 语音模型(如 Vosk)或调用云服务(阿里云智能语音、讯飞开放平台等)。










