JavaScript如何实现语音识别功能？

夢幻星辰 2025-12-27 00:00:00 次阅读

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() 前，浏览器会自动弹出麦克风授权提示。注意以下细节：

必须由用户手势（如点击按钮）触发 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('当前浏览器不支持语音识别');
}