首先检查浏览器是否支持Web Speech API，接着创建SpeechRecognition实例并配置语言、连续识别等参数，通过监听onresult事件获取语音转文字结果，结合start()和onend事件实现持续识别，注意需在HTTPS环境下运行并获取麦克风权限，适用于Chrome和Edge等主流浏览器。
Web Speech API 提供了浏览器端的语音识别功能，让开发者可以轻松集成语音输入能力到网页应用中。其中，SpeechRecognition 接口是实现语音转文字的核心。下面介绍如何使用 JavaScript 和 Web Speech API 实现基本的语音识别功能。
启用语音识别的基本步骤
要使用 Web Speech API 的语音识别功能，需创建一个 SpeechRecognition 实例（在部分浏览器中为 webkitSpeechRecognition），并配置相关事件回调。
- 检查浏览器是否支持 SpeechRecognition
- 创建识别实例，并设置连续识别和是否返回中间结果
- 监听 onresult 事件获取识别文本
- 通过 start() 启动识别，stop() 停止识别
示例代码：
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
// 连续识别模式
recognition.continuous = true;
// 返回中间结果（比如正在识别中的文字）
recognition.interimResults = true;
// 设置语言
recognition.lang = 'zh-CN';
recognition.onresult = (event) => {
const transcript = Array.from(event.results)
.map(result => result[0])
.map(result => result.transcript)
.join('');
console.log('识别结果：', transcript);
};
recognition.onerror = (event) => {
console.error('识别出错：', event.error);
};
// 开始识别
recognition.start();
常见配置与事件说明
通过设置不同的属性和监听事件，可以控制识别行为并处理各种状态。
立即学习“Java免费学习笔记（深入）”；
- continuous：设为 true 时持续监听，直到手动停止
- interimResults：true 表示返回中间结果，可用于实时显示“正在听写”效果
- lang：指定识别语言，如 'zh-CN' 中文，'en-US' 英文
- onstart：识别开始时触发
- onend：识别结束时触发，可在此重新启动
- onerror：发生错误时调用，例如无权限或网络问题
实用技巧：可在 onend 中自动重启识别，实现持续监听效果：
recognition.onend = () => {
console.log('识别已结束，尝试重启');
recognition.start(); // 持续监听
};
权限与兼容性注意事项
语音识别依赖麦克风访问权限，且目前主要在基于 Chromium 的浏览器中支持较好。
- 必须在 HTTPS 环境下运行（本地开发时 localhost 例外）
- 首次使用会提示用户授权麦克风
- Chrome、Edge 支持良好；Safari 部分支持；Firefox 不支持 SpeechRecognition
- 移动端 Android Chrome 支持，iOS Safari 支持有限
可通过判断全局对象是否存在来检测支持情况：
if (!('SpeechRecognition' in window) && !('webkitSpeechRecognition' in window)) {
alert('当前浏览器不支持语音识别，请使用 Chrome 或 Edge');
}
实际应用场景举例
语音识别可用于搜索框输入、语音指令控制、语音笔记记录等场景。
例如，为输入框添加语音按钮：
document.getElementById('voice-btn').onclick = () => {
recognition.start();
};
recognition.onresult = (event) => {
const spokenText = event.results[0][0].transcript;
document.getElementById('input-field').value = spokenText;
};
基本上就这些。只要注意权限、协议和浏览器兼容性，Web Speech API 能快速实现可用的语音输入功能。
