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

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

推荐答案

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

-- -------------------- ---- -------
-- -------------------- -- ------ -- ------------------------- -- ------- -
  ----- ----------------- - ------------------------ -- -------------------------------
  ----- ----------- - --- --------------------

  ---------------- - -------- -- ------
  -------------------------- - ----- -- --------

  ------------------- - -- -- -
    -----------------------
  --

  -------------------- - ------- -- -
    --- ---------- - ---
    --- ---- - - ------------------ - - --------------------- ---- -
      -- -------------------------- -
        ---------- -- -------------------------------
      - ---- -
         ---------- -- -------------------------------
      -
    -
    -------------------- ------------
    -- --------------------
    --------------------------------------------- - -----------
  --

  ------------------- - ------- -- -
    ------------------------ -------------
  --

  ----------------- - -- -- -
    -----------------------
  --

  ------------------------------------------------------------- -- -- -
    --------------------
  ---
   ------------------------------------------------------------ -- -- -
    -------------------
  ---


- ---- -
  ----------------------- --- ------ ------
  --------------------------------------------- - --------- --- ------ -----
-

-- -------------------- ---- -------
--------- -----
------
------
    ---------------------
-------
------
    ------- -----------------------------
     ------- ----------------------------
    ---- ------------------

    ------- ------------------------------
-------
-------

本题详细解读

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，实现实时语音交互功能。

纠错
反馈