JavaScript语音识别_Web Speech API应用-js教程-PHP中文网

JavaScript语音识别_Web Speech API应用

betcha

发布： 2025-11-27 17:46:54

原创

605人浏览过

Web Speech API通过SpeechRecognition接口实现浏览器语音转文字，需创建实例并配置语言、连续识别等参数，绑定onresult、onerror、onend等事件，调用start()启动识别，支持Chrome及Chromium系浏览器，需HTTPS环境与用户授权，适用于语音输入与控制场景。

javascript语音识别_web speech api应用

Web Speech API 让网页能够使用浏览器的语音识别功能，实现将用户的语音实时转换为文字。这项技术可以用于语音输入、语音控制、无障碍访问等多种场景。核心是 SpeechRecognition 接口（或其前缀版本 webkitSpeechRecognition），目前在 Chrome 和部分基于 Chromium 的浏览器中支持良好。

启用语音识别的基本步骤

要让网页具备语音识别能力，需要创建一个 SpeechRecognition 实例，并配置事件监听器来处理识别结果。

检查浏览器是否支持 Web Speech API
创建识别实例并设置参数（如语言、连续识别等）
绑定关键事件：onresult（收到结果）、onend（结束）、onerror（出错）
调用 start() 方法启动识别，stop() 停止

示例代码：

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
<p>// 设置中文识别
recognition.lang = 'zh-CN';
// 连续识别模式
recognition.continuous = true;
// 不自动结束
recognition.interimResults = false;</p><p>recognition.onresult = function(event) {
const transcript = event.results[event.results.length - 1][0].transcript;
console.log('识别结果:', transcript);
document.getElementById('output').textContent = transcript;
};</p><p>recognition.onerror = function(event) {
console.error('识别出错:', event.error);
};</p><p>recognition.onend = function() {
console.log('语音识别已结束');
};</p><p>// 启动识别
document.getElementById('startBtn').onclick = () => {
recognition.start();
};</p><p>// 停止识别
document.getElementById('stopBtn').onclick = () => {
recognition.stop();
};

登录后复制