JavaScript 通过 Web Speech API 的 SpeechRecognition 接口实现语音识别,仅 Chromium 内核浏览器稳定支持,需 HTTPS 或 localhost 环境;核心步骤包括创建实例、设置 continuous/interimResults、监听 result 事件获取 transcript、调用 start() 启动;该 API 还含 SpeechSynthesis 实现文本转语音,两者均纯前端运行,但需注意权限、安全上下文及中文 lang 设置。

JavaScript 通过 Web Speech API 实现语音识别,核心是 SpeechRecognition 接口(目前仅 Chrome、Edge 等基于 Chromium 的浏览器稳定支持,且需 HTTPS 或 localhost 环境)。
语音识别(SpeechRecognition)的基本用法
它允许网页将用户的实时语音转为文字。关键步骤包括创建实例、设置参数、监听事件、启动识别:
- 使用
new (window.SpeechRecognition || window.webkitSpeechRecognition)()创建识别器 - 设置
recognition.continuous = true支持连续识别;recognition.interimResults = true返回中间结果(带下划线的暂定文本) - 监听
result事件:每次识别到内容时触发,event.results[i][0].transcript是识别出的文字 - 调用
recognition.start()开始,recognition.stop()或recognition.abort()结束
Web Speech API 的两大核心功能
该 API 包含两个独立但互补的接口:
- SpeechRecognition:负责「听」—— 将语音输入转为文本(客户端处理,不传服务器)
- SpeechSynthesis:负责「说」—— 将文本转为语音朗读(支持多语言、语速、音调调节)
两者均无需后端服务,纯前端运行,但依赖浏览器实现和系统语音引擎。
立即学习“Java免费学习笔记(深入)”;
实际使用中的关键注意事项
不是所有环境都能直接用,必须留意兼容性与权限问题:
- 必须在安全上下文(HTTPS 或
localhost)中运行,HTTP 站点会静默失败 - 首次使用会弹出麦克风权限请求,用户拒绝后需手动开启(浏览器地址栏右侧图标)
- Chrome 中若页面被后台标签页暂停,识别可能中断;建议添加
end和error事件监听并做重试提示 - 中文识别效果依赖系统语言包,推荐显式设置
recognition.lang = 'zh-CN'
一个最小可运行示例
只需几行代码即可测试识别是否生效:
const rec = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
rec.lang = 'zh-CN';
rec.onresult = e => {
const text = e.results[0][0].transcript;
console.log('识别结果:', text);
};
rec.start(); // 点击按钮或用户操作后调用更稳妥
注意:请勿在页面加载即自动调用 start(),避免干扰用户或触发浏览器拦截。











