如何使用 JavaScript 实现语音识别 (Web Speech API)？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

使用 Web Speech API 可以实现 JavaScript 的语音识别功能。该 API 主要包括 SpeechRecognition 和 SpeechGrammarList 两个接口。以下是一个基本的实现示例：

// www.javascriptcn.com code example
if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  const recognition = new SpeechRecognition();

  recognition.lang = 'zh-CN'; // 设置识别语言
  recognition.interimResults = true; // 允许返回中间结果

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

  recognition.onresult = (event) => {
    let transcript = '';
    for (let i = event.resultIndex; i < event.results.length; i++) {
      if (event.results[i].isFinal) {
        transcript += event.results[i][0].transcript;
      } else {
         transcript += event.results[i][0].transcript;
      }
    }
    console.log('识别结果:', transcript);
    // 在这里处理识别出的文本，例如显示到页面上
    document.getElementById('output').textContent = transcript;
  };

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

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

  document.getElementById('startBtn').addEventListener('click', () => {
    recognition.start();
  });
   document.getElementById('stopBtn').addEventListener('click', () => {
    recognition.stop();
  });


} else {
  console.error('您的浏览器不支持 Web Speech API');
  document.getElementById('output').textContent = '您的浏览器不支持 Web Speech API';
}

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>语音识别示例</title>
</head>
<body>
    <button id="startBtn">开始语音识别</button>
     <button id="stopBtn">停止语音识别</button>
    <div id="output"></div>

    <script src="your_script.js"></script>
</body>
</html>

本题详细解读

Web Speech API 概述

Web Speech API 是一组允许网页应用程序进行语音识别和语音合成的 JavaScript 接口。它主要包含两个部分：

SpeechRecognition: 用于语音识别，将用户的语音转换为文本。
SpeechSynthesis: 用于语音合成，将文本转换为语音。

本题主要关注 SpeechRecognition 的使用。

`SpeechRecognition` 接口

SpeechRecognition 接口提供以下关键功能：

创建 SpeechRecognition 对象: const recognition = new SpeechRecognition();
设置语言: 使用 recognition.lang 属性设置识别的语言，例如 'zh-CN'（中文），'en-US'（英文）。
设置中间结果: 使用 recognition.interimResults 属性控制是否返回中间结果（即非最终的识别结果）。
事件监听器:
- onstart: 语音识别开始时触发。
- onresult: 语音识别返回结果时触发。该事件返回一个 SpeechRecognitionEvent 对象，其中包含识别出的文本结果。
- onerror: 语音识别发生错误时触发。
- onend: 语音识别结束时触发。
控制语音识别:
- recognition.start(): 启动语音识别。
- recognition.stop(): 停止语音识别。
- recognition.abort(): 强制终止语音识别。

示例代码详解

检查 API 支持: 首先检查浏览器是否支持 SpeechRecognition 或 webkitSpeechRecognition。
创建 SpeechRecognition 对象: 使用 new SpeechRecognition() 创建实例。
设置语言: recognition.lang = 'zh-CN'; 设置识别语言为中文。
设置 interimResults: recognition.interimResults = true; 允许返回中间结果。
监听事件:
- onstart：控制台输出 "语音识别已启动"。
- onresult：遍历 event.results 获取识别结果，将其拼接为字符串，并输出到控制台和页面元素。
- onerror：控制台输出错误信息。
- onend：控制台输出 "语音识别已结束"。
添加开始和停止按钮: 通过点击事件控制语音识别的开始和停止。

`SpeechRecognitionEvent` 对象

onresult 事件监听器接收一个 SpeechRecognitionEvent 对象，其关键属性如下：

results: 一个 SpeechRecognitionResultList 对象，包含了所有识别结果。
resultIndex: 当前返回结果的索引。

SpeechRecognitionResultList 对象是一个类数组对象，它的每一个元素都是一个 SpeechRecognitionResult 对象。SpeechRecognitionResult 对象的关键属性如下：

isFinal: 表示当前结果是否为最终结果（布尔值）。
[index]: 可以通过数字索引获取 SpeechRecognitionAlternative 对象，每一个SpeechRecognitionAlternative 对象包含了一个识别结果的文本 transcript

注意事项

权限: 用户可能需要授权浏览器访问麦克风。
浏览器兼容性: Web Speech API 在不同浏览器的支持程度可能有所不同。
网络: 语音识别通常需要网络连接。
语言支持: 并非所有语言都支持语音识别。

进一步扩展

使用 SpeechGrammarList 对象来定义语法，限制识别范围，提高准确率。
处理更复杂的识别结果，例如考虑不同的候选文本。
结合其他 Web API，例如 WebSocket，实现实时语音交互功能。

如何使用 JavaScript 实现语音识别 (Web Speech API)？