JS语音识别教程：WebSpeechAPI实战详解

想让你的网页也能听懂人话吗？本文为你带来 **JS 实现语音识别** 的实战教程，手把手教你利用 **Web Speech API** 构建语音交互应用。文章详细讲解了如何创建 `SpeechRecognition` 对象，设置语言、监听事件，并处理常见的错误类型，如无语音输入、网络错误等。更进一步，我们还探讨了如何通过优化环境、清晰发音等技巧提高语音识别的准确率，并介绍了 `SpeechGrammarList` 等高级特性。同时，针对 **Web Speech API 兼容性** 问题，提供了检测方法和第三方替代方案，即使在 Firefox 和 Safari 等浏览器上也能实现语音识别。无论是 Chrome 还是 Edge，都能轻松上手，快来学习如何用 JavaScript 赋予你的网页听觉吧！

JavaScript 可以通过 Web Speech API 实现语音识别，其核心接口为 SpeechRecognition。具体步骤如下：1. 创建 SpeechRecognition 对象并兼容不同浏览器前缀；2. 设置语言、连续识别模式及是否返回中间结果；3. 监听 start、result、end 和 error 等事件；4. 调用 start() 开始识别，stop() 停止识别。错误处理可通过 onerror 事件捕获常见错误类型并提示用户，如 no-speech、not-allowed、network 等。提高准确率的方法包括优化环境、清晰发音、调整语速、使用高质量麦克风及限制识别语法范围。Web Speech API 兼容性较好支持 Chrome 和 Edge，Firefox 和 Safari 支持较弱，不支持时可考虑第三方服务如 Google Cloud 或 Azure Speech Services。

实现语音识别，JavaScript 可以借助 Web Speech API，它提供了浏览器内置的语音识别能力，无需依赖外部库或服务。

解决方案

Web Speech API 主要包含两个接口：SpeechRecognition 和 SpeechSynthesis。前者用于语音识别，后者用于语音合成（文本转语音）。这里我们重点关注 SpeechRecognition。

基本步骤：

1. 创建 SpeechRecognition 对象：

   const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();

   这里使用了 window.SpeechRecognition || window.webkitSpeechRecognition，是因为 Chrome 早期版本使用的是带有 webkit 前缀的接口。

2. 设置语言：

   recognition.lang = 'zh-CN'; // 设置为中文

   可以根据需要设置为其他语言。

3. 设置连续识别模式（可选）：

   recognition.continuous = false; // 默认是 false，设置为 true 可以进行连续识别

   连续识别模式下，识别器会一直监听语音输入，直到手动停止。

4. 设置是否返回中间结果（可选）：

   recognition.interimResults = false; // 默认是 false，设置为 true 可以返回中间结果

   中间结果是指在语音识别过程中，识别器返回的初步结果，这些结果可能会随着语音的继续输入而发生变化。

5. 监听事件：

   • start: 识别器开始监听语音输入时触发。
   • result: 识别器识别到语音时触发，返回识别结果。
   • end: 识别器停止监听语音输入时触发。
   • error: 发生错误时触发。

6. 开始识别：

   recognition.start();

7. 停止识别：

   recognition.stop();

示例代码：

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'zh-CN';
recognition.interimResults = false;
recognition.maxAlternatives = 1; // 设置返回的最大备选结果数量，默认为 1

document.querySelector('button').addEventListener('click', () => {
  recognition.start();
});

recognition.onresult = (event) => {
  const result = event.results[0][0].transcript;
  console.log('识别结果：' + result);
  document.getElementById('output').textContent = result;
}

recognition.onerror = (event) => {
  console.error('语音识别出错：' + event.error);
};

recognition.onstart = () => {
    console.log("语音识别已启动");
}

recognition.onend = () => {
    console.log("语音识别已结束");
}

这个例子中，点击按钮会启动语音识别，识别结果会显示在 id 为 output 的元素中。

如何处理语音识别的错误？

语音识别出错很常见，网络问题、麦克风权限、浏览器兼容性等等都可能导致错误。 SpeechRecognition 对象的 onerror 事件可以捕获这些错误。

常见的错误类型：

• no-speech: 没有检测到语音输入。
• aborted: 识别被中止。
• audio-capture: 无法获取音频输入。
• network: 网络错误。
• not-allowed: 没有权限使用麦克风。
• service-unavailable: 语音识别服务不可用。
• bad-grammar: 语法错误。
• language-not-supported: 不支持的语言。

处理方法：

在 onerror 事件处理函数中，可以根据 event.error 的值来判断错误类型，并采取相应的措施。 比如，如果错误类型是 not-allowed，可以提示用户检查麦克风权限。如果错误类型是 network，可以提示用户检查网络连接。

recognition.onerror = (event) => {
  console.error('语音识别出错：' + event.error);
  switch (event.error) {
    case 'no-speech':
      alert('没有检测到语音，请重试。');
      break;
    case 'network':
      alert('网络错误，请检查网络连接。');
      break;
    case 'not-allowed':
      alert('请允许浏览器使用麦克风。');
      break;
    default:
      alert('发生未知错误，请重试。');
  }
};

如何提高语音识别的准确率？

语音识别的准确率受到很多因素的影响，比如环境噪音、口音、语速等等。 可以尝试以下方法来提高准确率：

1. 优化环境： 尽量在安静的环境中使用语音识别，避免噪音干扰。
2. 清晰发音： 尽量用清晰、标准的普通话发音。
3. 调整语速： 语速不宜过快或过慢，保持适中。
4. 使用合适的麦克风： 高质量的麦克风可以提高音频质量，从而提高识别准确率。
5. 使用 Web Speech API 的高级特性： 比如，可以使用 SpeechGrammarList 对象来指定语法，限制识别范围，从而提高准确率。

关于 SpeechGrammarList:

SpeechGrammarList 可以用来定义一组语法，告诉识别器只识别这些语法中的内容。 比如，可以定义一组命令，让识别器只识别这些命令。

const grammar = '#JSGF V1.0; grammar colors; public <color> = red | green | blue | yellow | purple ;'
const speechRecognitionList = new (window.SpeechGrammarList || window.webkitSpeechGrammarList)();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;

这段代码定义了一个名为 colors 的语法，它包含 red, green, blue, yellow, purple 这几个颜色。 然后，将这个语法添加到 SpeechRecognition 对象的 grammars 属性中。 这样，识别器就只会识别这几个颜色。

Web Speech API 的兼容性如何？

Web Speech API 的兼容性取决于浏览器。 目前，Chrome 和 Edge 对 Web Speech API 的支持较好，Firefox 和 Safari 的支持相对较弱。 可以使用 window.SpeechRecognition 和 window.SpeechGrammarList 来检测浏览器是否支持 Web Speech API。

if ('SpeechRecognition' in window) {
  // 支持 Web Speech API
  console.log('支持 Web Speech API');
} else {
  // 不支持 Web Speech API
  console.log('不支持 Web Speech API');
  alert('您的浏览器不支持 Web Speech API，请更换浏览器。');
}

如果浏览器不支持 Web Speech API，可以考虑使用第三方的语音识别库，比如 Google Cloud Speech-to-Text API、Microsoft Azure Speech Services 等。 这些第三方库通常提供更强大的功能和更高的准确率，但也需要付费使用。

以上就是《JS语音识别教程：WebSpeechAPI实战详解》的详细内容，更多关于JavaScript,语音识别,错误处理,WebSpeechAPI,SpeechRecognition的资料请关注golang学习网公众号！