JavaScript可通过Web Speech API实现语音识别,仅支持Chrome、Edge等Chromium内核浏览器;需检测兼容性、创建SpeechRecognition实例、设置属性、监听onresult等事件,并由用户手势触发start()获取识别文本。

JavaScript 可以通过浏览器原生的 Web Speech API 实现语音识别功能,无需后端或第三方 SDK,但仅支持较新版本的 Chrome、Edge 和部分基于 Chromium 的浏览器(Safari 和 Firefox 目前不支持 SpeechRecognition)。
启用 SpeechRecognition 接口
SpeechRecognition 是 Web Speech API 的核心接口,用于将用户语音实时转为文本。需先检测浏览器兼容性,再创建实例:
- 检查
window.SpeechRecognition或window.webkitSpeechRecognition是否存在 - 创建识别器实例:
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); - 设置关键属性:如
recognition.continuous = false(单次识别)、recognition.lang = 'zh-CN'(中文识别)
监听识别事件并获取结果
语音识别是异步过程,需绑定多个事件处理结果:
-
onstart:用户开始说话时触发 -
onresult:识别成功后返回SpeechRecognitionEvent,其中event.results[0][0].transcript是最可能的识别文本 -
onend:识别结束(无论成功失败),可在此触发重新启动(若需持续监听) -
onerror:捕获错误(如网络中断、权限拒绝),建议检查event.error类型
请求麦克风权限并启动识别
调用 recognition.start() 前,浏览器会自动弹出麦克风授权提示。注意以下细节:
立即学习“Java免费学习笔记(深入)”;
- 必须由用户手势(如点击按钮)触发
start(),否则会被浏览器阻止 - 首次运行时若用户拒绝权限,后续需手动在浏览器地址栏点击锁形图标重新开启
- 移动端需添加
recognition.interimResults = true才能获得实时中间结果(边说边显示)
简单可用的代码示例
以下是最小可运行片段(含基础容错):
if ('webkitSpeechRecognition' in window) {
const recognition = new webkitSpeechRecognition();
recognition.lang = 'zh-CN';
recognition.interimResults = true;
recognition.onresult = (event) => {
const transcript = event.results[0][0].transcript;
console.log('识别结果:', transcript);
};
recognition.onerror = (event) => {
console.error('识别出错:', event.error);
};
document.getElementById('start-btn').onclick = () => {
recognition.start();
};
} else {
alert('当前浏览器不支持语音识别');
}










