要让网页支持语音识别，最直接的方式是使用浏览器提供的 web speech api。1. 首先检查浏览器是否支持该 api，可通过判断 window 中是否存在 webkitspeechrecognition 或 speechrecognition 对象来确认，目前主流支持的浏览器为 chrome 和 edge，safari 与 firefox 支持有限；2. 接着初始化语音识别对象，通过 new 创建实例并设置参数，如语言、是否连续识别及是否返回中间结果；3. 然后监听关键事件，包括 onresult 获取识别结果、onerror 捕获错误及 onend 监听识别结束；4. 最后实现启动与停止语音识别功能，通常绑定按钮点击事件调用 start() 与 stop() 方法，并注意用户权限授予与网络环境对识别准确率的影响。
要让网页支持语音识别，最直接的方式是用浏览器提供的 Web Speech API。这个 API 分为两部分：语音识别（SpeechRecognition）和语音合成（SpeechSynthesis）。我们这里重点讲语音识别的部分。
下面我们就一步步来看看怎么用 Web Speech API 来实现 HTML 页面上的语音识别功能。
1. 检查浏览器是否支持 Web Speech API
不是所有浏览器都支持语音识别功能，所以第一步是确认用户使用的浏览器是否兼容。
立即学习“前端免费学习笔记（深入）”；
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
// 支持语音识别
} else {
console.log('当前浏览器不支持语音识别');
}
目前主流支持的是 Chrome 和 Edge 浏览器，Safari 和 Firefox 的支持情况有限。
2. 初始化语音识别对象
创建一个语音识别的实例，可以这样写：
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
然后你可以设置一些参数，比如语言、是否连续识别等：
recognition.lang = 'zh-CN'; // 设置语言为中文 recognition.continuous = false; // 不持续监听，说一次停一次 recognition.interimResults = false; // 不返回中间结果，只返回最终结果
- continuous 控制是否连续识别；
- interimResults 决定是否显示中间识别结果（边说边出文字）；
3. 监听语音识别事件
语音识别过程是异步的，你需要绑定几个关键事件来处理结果和状态变化：
recognition.onresult = function(event) {
const transcript = event.results[0][0].transcript;
console.log('你说的是：', transcript);
};
recognition.onerror = function(event) {
console.error('识别出错：', event.error);
};
recognition.onend = function() {
console.log('语音识别已结束');
};
- onresult 是获取语音转文字的核心回调；
- onerror 可以捕获麦克风权限被拒等问题；
- onend 表示识别过程结束，可以在这里重新启动或提示用户操作。
4. 启动和停止语音识别
有了上面的基础之后，就可以让用户点击按钮开始说话了：
<button id="start">开始录音</button>
<button id="stop">停止录音</button>
<script>
document.getElementById('start').onclick = () => {
recognition.start();
};
document.getElementById('stop').onclick = () => {
recognition.stop();
};
</script>
注意：有些浏览器在调用 start() 时会弹出请求麦克风权限的提示，如果用户拒绝，后续识别就会失败。
小细节补充：语音识别有时不太准？
这很正常，特别是在嘈杂环境下或者口音比较重的情况下。另外，语音识别依赖网络（因为需要把音频传到服务器处理），所以网速慢也可能影响体验。
如果你希望提高识别准确率，可以在安静环境下测试，或者尝试引导用户使用标准普通话。
基本上就这些。Web Speech API 的语音识别功能虽然简单，但已经能满足很多场景的需求，比如语音输入、语音控制页面等。只要注意兼容性和用户体验，就能做出不错的交互效果。
暂无评论内容