Web Speech 的概念及用法，语音识别相关API介绍

JS 语音相关的 Web Speech API 之语音识别

[TOC]

# 1. Web Speech API

Web Speech API 使你能够将语音数据合并到 Web 应用程序中。Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。

# 2. Web Speech 的概念及用法

Web Speech API 使 Web 应用能够处理语音数据，该项 API 包含以下两个部分：

# 3. 语音识别

语音识别通过 SpeechRecognition 接口进行访问，它提供了识别从音频输入（通常是设备默认的语音识别服务）中识别语音情景的能力。一般来说，你将使用该接口的构造函数来构造一个新的 SpeechRecognition 对象，该对象包含了一系列有效的对象处理函数来检测识别设备麦克风中的语音输入。SpeechGrammar 接口则表示了你应用中想要识别的特定文法。文法则通过 JSpeech Grammar Format (JSGF.) 来定义。

## 3.1. SpeechRecognition

SpeechRecognition是语音识别服务的控制器接口；它也处理由语音识别服务发来的 SpeechRecognitionEvent 事件。
SpeechRecognition是一个无参数的构造函数，语法如下

```javascript
new SpeechRecognition()
```

### 3.1.1. 实例属性

了解 SpeechRecognition 实例属性前，需要先了解下 [SpeechGrammar](#SpeechGrammar1)

|属性|默认值|说明|
|--|--|--|
|**continuous**|默认返回单个结果(false) 说明：一个布尔值，表示当前SpeechRecognition的连续状态。true表示连续，false表示不连续（每次只有一个结果）|SpeechRecognition接口的continuous属性控制每次识别是返回连续结果，还是仅返回单个结果，当设置为True时，语音识别会持续监听语音输入，而不是只识别一次语音片段后就停止。这样可以实现对连续语音流的识别，比如用于实时转录等场景|
|**grammars**|SpeechGrammarList 其中包含代表应用程序语法的SpeechGramar对象|SpeechRecognition接口的语法属性返回并设置一组SpeechGrammar（应用程序语法）对象，这些对象表示当前SpeechReconsition将理解的语法|
|**interimResults[[作用]](#interimResults)**|interimResults的默认值为false。 一个布尔值，表示当前SpeechRecognition的临时结果的状态。true表示返回临时结果，false表示不返回。|SpeechRecognition接口的interimResults属性控制是否应返回临时结果（true）（false）。临时结果是尚未最终确定的结果（例如SpeechRecognitionResult.isFinal属性为false）|
|**lang**|如果未指定，则默认为HTML lang属性值，如果也没有设置，则默认使用用户代理的语言设置 值是表示当前SpeechRecognition的BCP 47语言标签的字符串，例如：en-US / zh-CN |SpeechRecognition接口的lang属性返回并设置当前SpeechReconsition的语言|
|**maxAlternatives[[解释]](#interimResults)**|默认值为：1 一个数字，表示每个结果返回的最大备选方案。|SpeechRecognition接口的maxAlternatives属性设置每个SpeechReconcitionResult提供的SpeechReconsitionAlternatives的最大数量。它指定了语音识别引擎应该返回的识别结果的最大数量（除了主要识别结果之外的其他可能的结果）|

>**interimResults 作用**
 - **实时反馈**：
 - 它提供了一种实时反馈机制。例如，在一个语音输入的应用程序中，用户说话时，系统可以根据已经识别的部分语音内容实时地显示出来。这就像在语音输入法中，用户一边说话，屏幕上一边出现识别后的文字，尽管这些文字可能会随着后续语音内容的识别而更新。
 - **提高用户体验**：
 - 对于较长的语音输入，用户可以通过观察这些中间结果来确认系统是否正确地理解了开头部分的语音。如果用户发现开头部分的识别有误，可能会及时调整说话方式或者纠正内容。比如，在一个语音指令应用中，用户可以看到系统已经正确识别了“打开”这个词，就可以继续放心地说出后续的指令，如“打开音乐播放器”。
 - **优化识别过程**：
 - 对于开发者来说，`interimResults`可以帮助他们更好地理解语音识别系统的工作状态。通过观察中间结果，可以分析识别的准确性和效率，对识别算法进行优化。例如，如果发现某些语音片段的中间结果总是出现错误，可以针对性地调整声学模型或者语言模型的参数。
***
**maxAlternatives 详细解释**
 - 通常情况下，语音识别引擎会对输入的语音生成一个它认为最有可能的文本转录结果。但是，语音识别存在一定的不确定性，因为语音可能会受到背景噪音、发音模糊等多种因素的影响。
 - 当`maxAlternatives`的值大于1时，语音识别引擎除了返回它认为最正确的结果外，还会返回其他可能的识别结果。例如，如果`maxAlternatives`设置为3，除了主要的识别文本外，还会提供另外两个可能的文本转录选项。这些选项是按照概率排序的，排在前面的选项被认为是更有可能的替代结果。

**MDN 提供的示例：**

### 3.1.2. 实例方法

**MDN 提供的示例：**

const diagnostic = document.querySelector(".output");
const bg = document.querySelector("html");

document.body.onclick = () => {
  recognition.start();
  console.log("Ready to receive a color command.");
};

abortBtn.onclick = () => {
  recognition.abort();
  console.log("Speech recognition aborted.");
};

recognition.onspeechend = () => {
  recognition.stop();
  console.log("Speech recognition has stopped.");
};
```

### 3.1.3. 事件

事件触发顺序：soundstart -》 audiostart -》 speechstart -》 nomatch -》 [result] -》 audioend -》 result -》 speechend -》 soundend -》 end

>Tips：
+ error 事件在整个语音识别过程中随时触发，只要出现错误就会触发
+ result 事件与 interimResults 属性有关，如果设置为true了那么result会触发多次，接收到临时结果时会触发，最后整个语音识别结束也会触发
+ soundend 事件触发的顺序应该在 speechend 之后（这个还需要确认，待自己验证）
+ soundstart 事件触发的顺序应该在 audiostart 之前（这个还需要确认，待自己验证）
+ speechend 事件触发的顺序应该在 result 之后（这个还需要确认，待自己验证）
+ speechstart 事件触发的顺序应该在 soundstart 之前（这个还需要确认，待自己验证）

#### 3.1.3.1. audioend

audioend事件是在语音输入的音频流结束时触发的

**详细解释：**

- 当用户停止说话，并且语音识别系统判定语音输入的音频部分已经结束时，就会触发`audioend`事件。这个判定通常基于音频信号的特征，比如音量低于某个阈值持续一段时间、音频信号的能量变化等因素。

- 例如，在一个简单的语音输入应用中，如果用户说完一段话后短暂停顿，语音识别系统检测到音频信号消失（或者低于可识别的范围），就会触发`audioend`事件。这类似于在使用麦克风录音时，当声音停止后，录音设备判定音频录制结束的情况。
***
**语法：**

```javascript
// 下面是两种方式的语法，使用时选其一就可以了
// addEventListener方法监听audioend事件
addEventListener("audioend", (event) => {});
// onaudioend事件处理程序属性方式
onaudioend = (event) => {};
```
***
**MDN示例：**

```javascript
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
recognition.addEventListener("audioend", () => {
  console.log("Audio capturing ended");
});
recognition.onaudioend = () => {
  console.log("Audio capturing ended");
};
```
***
**与其他事件的关联和区别**

- 与`end`事件对比：`end`事件主要是在整个语音识别过程结束时触发，包括音频结束后的识别处理等全部完成。而`audioend`事件仅仅关注音频流本身的结束。例如，`audioend`触发后，系统可能还在对刚刚结束的音频进行识别处理，此时`end`事件尚未触发。

- 与`result`事件关联：`audioend`事件触发后，系统通常会开始处理音频数据以生成识别结果，当有结果生成时就可能触发`result`事件。所以`audioend`事件可以看作是`result`事件的一个前置事件，它标志着语音输入阶段的结束，为后续的识别结果生成提供了信号。

[========]

#### 3.1.3.2. audiostart

audiostart事件是在语音识别系统开始接收并处理音频输入（也就是用户开始说话，并且语音被系统检测到）时触发的。

**详细解释**

- 当用户开始说话，麦克风捕捉到语音信号，并且这个信号强度达到一定的可识别阈值，语音识别系统判定开始有有效的语音输入时，`audiostart`事件就会被触发。

- 例如，在一个网页语音应用中，当用户对着麦克风说出第一个音节，只要这个声音能够被系统识别为有效的语音信号（系统通常会忽略非常微弱的背景噪音等），`audiostart`事件就会立即触发。这个事件的触发标志着语音识别的音频输入阶段正式开始。
***
**语法：**

```javascript
addEventListener("audiostart", (event) => {});
onaudiostart = (event) => {};
```
***
**MDN示例：**

```javascript
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
recognition.addEventListener("audiostart", () => {
  console.log("Audio capturing started");
});
recognition.onaudiostart = () => {
  console.log("Audio capturing started");
};
```
***
**与其他事件的关联**

- 与`audioend`事件关联：`audiostart`和`audioend`事件分别标志着语音输入阶段的开始和结束。`audiostart`事件触发后，系统开始持续接收和处理语音音频，直到`audioend`事件触发，表示语音输入结束。

- 与`result`事件关联：`audiostart`事件先于`result`事件触发。语音识别是一个多阶段的过程，`audiostart`开启了音频收集阶段，收集到足够的音频后经过处理才能产生识别结果，进而触发`result`事件。例如，在一个语音转文字的应用中，`audiostart`触发后，系统收集语音，然后进行分析处理，最终生成文字内容并触发`result`事件来传递结果。

[========]

#### 3.1.3.3. end

end事件是在整个语音识别过程完成后触发的。这包括语音音频的接收、识别处理，以及所有相关操作都结束的时候

**详细的触发条件**

- 当语音识别系统完成对语音音频的最后处理，生成最终的识别结果（如果有的话），并且不再进行任何与本次语音识别相关的操作时，`end`事件就会被触发。

- 例如，在一次语音识别过程中，系统首先通过`audiostart`事件开始接收语音音频，当音频接收结束时触发`audioend`事件，然后系统对收集到的音频进行识别处理。在这个过程中，可能会触发多次`result`事件来提供中间结果或者最终结果。当所有的识别工作结束，系统不再对该语音样本进行任何操作，如不再更新结果、不再处理音频相关的数据，就会触发`end`事件。
***
**语法：**

```javascript
addEventListener("end", (event) => {});
onend = (event) => {};
```
***
**MDN示例：**

```javascript
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
recognition.addEventListener("end", () => {
  console.log("Speech recognition service disconnected");
});
recognition.onend = () => {
  console.log("Speech recognition service disconnected");
};
```
***
**与其他事件的对比和关联**

- 与`audioend`事件：`audioend`事件仅仅表示语音音频的结束，此时系统可能还在对音频进行识别处理。而`end`事件则意味着整个语音识别流程，包括后续的识别、结果生成等操作全部结束。

- 与`result`事件：`result`事件主要是在识别出部分或者全部结果时触发。`end`事件触发时，所有的`result`事件应该已经完成，因为它标志着整个语音识别任务的结束。例如，在一个语音输入文本框应用中，`result`事件可能用于实时更新文本框中的内容，而`end`事件可以用于提示用户本次语音输入和识别已经全部完成，比如改变文本框的边框颜色或者显示一个提示信息。

#### 3.1.3.4. error

error事件是在语音识别过程出现错误时触发的。这种错误可能是由于多种原因导致的，包括但不限于网络问题、语音数据获取问题、语音识别服务本身的故障等。

**详细的错误原因及触发场景**

- **网络相关问题**：如果语音识别服务是基于云端的（例如使用浏览器的默认语音识别服务，其通常需要将语音数据发送到云端服务器进行处理），当网络连接不稳定、中断或者网络延迟过高时，就可能触发`error`事件。例如，在网络信号很弱的环境中使用语音识别功能，语音数据无法顺利传输到云端服务器进行识别，此时就会产生错误并触发`error`事件。

- **权限问题**：当用户没有授予浏览器访问麦克风的权限时，尝试进行语音识别操作会触发`error`事件。因为语音识别需要获取用户的语音数据，没有权限就无法正常获取音频，这被视为一种错误情况。例如，在浏览器首次请求使用麦克风权限时，用户拒绝了该请求，之后如果代码尝试启动语音识别，就会收到权限相关的错误并触发`error`事件。

- **语音数据问题**：如果音频数据本身存在问题，也会触发`error`事件。这可能包括音频格式不符合要求（虽然浏览器会尽量处理音频格式，但某些复杂情况仍可能导致问题）、音频数据损坏（例如在传输过程中部分数据丢失）等。例如，一个被错误编码的语音文件，在尝试通过`SpeechRecognition` API进行识别时，由于数据无法正确解析，就会触发`error`事件。

- **语音识别服务故障**：即使网络和数据都正常，语音识别服务自身可能出现故障。比如服务器端的语音识别算法出现异常、服务器过载等情况。当这些情况发生时，浏览器端的语音识别请求无法得到正确处理，进而触发`error`事件。
***
**语法：**

```javascript
addEventListener("error", (event) => {});
onerror = (event) => {};
```
***
**属性：**

SpeechRecognitionErrorEvent 继承至Event，因此拥有Event的所有属性

|属性|说明|
|--|--|
|SpeechRecognitionErrorEvent.error（event.error）|只读属性，返回引发的错误类型|
|SpeechRecognitionErrorEvent.message（event.message）|只读属性，返回一条更详细地描述错误的消息|

***
**MDN示例：**

```javascript
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
recognition.addEventListener("error", (event) => {
  console.error(`Speech recognition error detected: ${event.error}`);
});
recognition.onerror = (event) => {
  console.error(`Speech recognition error detected: ${event.error}`);
};
```
***
**处理`error`事件的重要性**

- 当`error`事件触发时，开发者可以通过对应的事件处理函数来捕获错误信息，并采取相应的措施。例如，可以向用户显示一个友好的错误提示，告知用户语音识别出现问题以及可能的原因（如“网络连接不佳，请检查网络后重试”）。或者可以尝试重新启动语音识别过程，在一定程度上提高用户体验。

#### 3.1.3.5. nomatch

nomatch 事件是当语音识别系统无法找到与输入语音相匹配的内容时触发的。

**触发场景：**

- **语音不清晰或不符合预期格式**：

- 当用户说话声音非常模糊、音量过低，或者语音中包含大量难以识别的噪音时，语音识别系统可能无法有效提取有价值的内容来进行匹配，从而触发`nomatch`事件。例如，在一个嘈杂的环境中，用户说话的声音被周围的机器轰鸣声或人群嘈杂声掩盖，语音识别系统难以分辨用户语音的具体内容，就会判定为无匹配内容并触发该事件。

- 另外，如果用户的语音不符合系统预期的语法或词汇范围（例如在一个只设计用于识别数字和简单数学运算指令的语音系统中，用户说了一段关于旅游景点的内容），也会触发`nomatch`事件。

- **语音识别服务能力限制**：

- 即使语音清晰，但是如果语音内容包含系统无法识别的词汇、方言或者语言，也会导致`nomatch`事件触发。比如，一些语音识别系统可能对某些生僻的方言词汇或者新出现的网络流行语没有足够的识别能力，当遇到这些内容时，就无法做出匹配并触发此事件。

- **识别算法的不确定性**：

- 由于语音识别算法本身存在一定的概率性和不确定性，在某些情况下，即使语音质量尚可，也可能因为算法无法确定一个足够合理的匹配内容而触发`nomatch`事件。例如，当用户说话的语速过快，或者语音内容存在多种可能的解释，识别算法可能无法选择一个符合要求的匹配结果，从而触发该事件。
***
**语法：**

```javascript
addEventListener("nomatch", (event) => {});
onnomatch = (event) => {};
```
***
**属性：**

SpeechRecognitionEvent 继承至Event，因此拥有Event的所有属性

```javascript
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
recognition.addEventListener("nomatch", (event) => {
  console.error(`Speech not recognized`);
});
recognition.onnomatch = (event) => {
  console.error(`Speech not recognized`);
};
```

[========]

#### 3.1.3.6. result

result事件是在语音识别系统成功识别出部分或全部语音内容后触发的

**详细解释：**

- **部分识别结果**：当`SpeechRecognition`的`interimResults`属性设置为`true`时，在语音识别过程中，一旦系统识别出一部分语音内容，就会触发`result`事件来提供这些临时的识别结果。例如，用户在说话过程中，系统可能会根据已经接收到和处理的语音片段，快速生成并返回一些可能的文本内容，这些内容可能会随着用户继续说话而不断更新。这种情况对于实时显示语音识别进度或者提供快速反馈非常有用，比如在一个语音输入的即时通讯应用中，用户说话时，聊天框可以实时显示已经识别出来的文字内容。

- **最终识别结果**：当语音输入结束（通常由`audioend`事件标志），系统完成对整个语音的处理并得到最终的识别结果后，也会触发`result`事件。此时的结果通常是系统认为最准确的对整个语音内容的转录。例如，在一个语音转写文档的应用中，当用户说完一段话后，系统完成所有处理，将完整的语音转换为文字内容，并通过`result`事件将最终结果发送给应用的其他部分进行进一步处理，如将文字内容显示在文档编辑区域。
***
**语法：**
```javascript
addEventListener("result", (event) => {});
onresult = (event) => {};
```
***
**属性：**

SpeechRecognitionEvent 继承至Event，因此拥有Event的所有属性

```javascript
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
recognition.addEventListener("result", (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
});
recognition.onresult = (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
};
```
**与其他事件的关联：**

- 与`audiostart`和`audioend`事件：`audiostart`事件开启语音音频的接收过程，在这个过程中，根据`interimResults`的设置，可能会多次触发`result`事件来提供临时结果。当`audioend`事件表示语音音频结束后，系统会进一步处理以提供最终的完整识别结果，这也会触发`result`事件。

- 与`end`事件：`result`事件主要关注识别结果的传递，而`end`事件标志着整个语音识别过程的结束。在正常情况下，最后一次`result`事件（提供最终识别结果）触发后，`end`事件可能随之触发，表明语音识别以及结果提供都已完成。

[========]

#### 3.1.3.7. soundend

当停止检测到任何声音（无论是否可识别的语音）时触发

**语法：**

```javascript
addEventListener("soundend", (event) => {});
onsoundend = (event) => {};
```
***
**MDN示例：**

```javascript
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
recognition.addEventListener("soundend", (event) => {
  console.log("Sound has stopped being received");
});
recognition.onsoundend = (event) => {
  console.log("Sound has stopped being received");
};
```

[========]

#### 3.1.3.8. soundstart

当检测到任何声音（无论是否可识别的语音）时触发

**语法：**

```javascript
addEventListener("soundstart", (event) => {});
onsoundstart = (event) => {};
```
***
**MDN示例：**

```javascript
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
recognition.addEventListener("soundstart", (event) => {
  console.log("Some sound is being received");
});
recognition.onsoundstart = (event) => {
  console.log("Some sound is being received");
};
```

[========]

#### 3.1.3.9. speechend

当语音识别服务识别的语音停止检测时被激发

**语法：**

```javascript
addEventListener("speechend", (event) => {});
onspeechend = (event) => {};
```
***
**MDN示例：**

```javascript
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
recognition.addEventListener("speechend", () => {
  console.log("Speech has stopped being detected");
});
recognition.onspeechend = () => {
  console.log("Speech has stopped being detected");
};
```

[========]

#### 3.1.3.10. speechstart

当检测到由语音识别服务识别为语音的声音时启动

**语法：**

```javascript
addEventListener("start", (event) => {});
onstart  = (event) => {};
```
***
**MDN示例：**

```javascript
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
recognition.addEventListener("start", () => {
  console.log("Speech recognition service has started");
});
recognition.onstart  = () => {
  console.log("Speech recognition service has started");
};
```

[========]

#### 3.1.3.11. start

当检测到由语音识别服务识别为语音的声音时启动，start事件是在语音识别过程开始时触发。具体来说，当调用SpeechRecognition实例的start()方法来启动语音识别后，就会立即触发start事件

**详细解释：**

当执行recognition.start()代码时，就会触发onstart事件处理函数，从而在控制台打印出 “语音识别已开始” 的消息。这标志着语音识别系统开始准备接收语音输入，包括初始化音频捕获设备（通常是麦克风）、设置相关的识别参数等操作
***
**语法：**

```javascript
addEventListener("speechstart", (event) => {});
onspeechstart  = (event) => {};
```
***
**MDN示例：**

```javascript
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
recognition.addEventListener("speechstart", () => {
  console.log("Speech has been detected");
});
recognition.onspeechstart  = () => {
  console.log("Speech has been detected");
};
```

## 3.2. SpeechGrammar

SpeechGrammar是一种模式：
将要交由语音识别服务进行识别的词汇或者词汇的模式，SpeechGrammar是在语音识别领域用于定义语音语法规则的对象。它在语音识别系统中充当一种约束和引导机制，帮助系统更好地理解用户语音内容

文法通过 [JSpeech Grammar Format (JSGF.)] (https://www.w3.org/TR/jsgf/)来定义

### 3.2.1. 实例属性

|属性|说明|
|--|--|
|**src **|设置或返回 SpeechGrammar 对象实例中包含文法的字符串|
|**weight**|可选字段，设置或返回 SpeechGrammar 对象的权重|

**MDN示例：**

console.log(speechRecognitionList[0].src); // 应该返回和上面语法变量一样的内容
console.log(speechRecognitionList[0].weight); // 应该返回 1 - 与上面第四行所设置的权重一致
```

> Tips：
MND 不推荐使用 new SpeechGrammar() 方法去修改 SpeechRecognition 的语音识别语法规范，下面的示例不推荐
```javascript
const newGrammar = new SpeechGrammar();
newGrammar.src = "#JSGF V1.0; grammar names; public <name> = chris | kirsty | mike;";
speechRecognitionList[1] = newGrammar; // 应将新的 SpeechGrammar 对象添加到列表中。
```

## 3.3. SpeechGrammarList

表示一个由 SpeechGrammar 对象构成的列表，其中包含我们希望识别服务识别的单词或单词模式

### 3.3.1. 实例属性

|属性|说明|
|--|--|
|**length **|返回SpeechGrammarList中包含的SpeechGrammer对象的数量|

### 3.3.2. 实例方法

**MDN示例：**addFromString方法将语法加入到SpeechGrammerList中

## 3.4. SpeechRecognitionError

表示语音识别服务发出的报错信息

### 3.4.1. 实例属性

```javascript
const recognition = new SpeechRecognition();
recognition.onerror = (event) => {
  console.log(`Speech recognition error detected: ${event.error}`);
  console.log(`Additional information: ${event.message}`);
};
```

## 3.5. SpeechRecognitionEvent

result 和 nomatch 的事件对象，包含了与语音识别过程中间或最终结果相关的全部数据，SpeechRecognitionEvent还继承其父接口Event的属性

### 3.5.1. 实例属性

**MDN示例：**与[SpeechRecognitionResult一致](#3.7.2. 实例方法)

## 3.6. SpeechRecognitionAlternative

表示由语音识别服务识别出的一个词汇

### 3.6.1. 实例属性

|属性|说明|
|--|--|
|**transcript**|只读属性，返回一个字符串，其中包含识别单词的转录|
|**confidence**|只读属性，返回一个介于0和1之间的数字估计值，用于评估语音识别系统对识别正确性的信心程度|

**MDN示例：**与[SpeechRecognitionResult一致](#3.7.2. 实例方法)

## 3.7. SpeechRecognitionResult

表示一次识别中的匹配项，其中可能包含多个 SpeechRecognitionAlternative 对象

### 3.7.1. 实例属性

|属性|说明|
|--|--|
|**isFinal **|只读，一个布尔值，表示此结果是否为最终结果（true）或非最终结果（false）——如果是，则这是返回此结果的最后一次；如果没有，则此结果是临时结果，稍后可能会更新|
|**length**|返回“数组”的长度——结果中包含的SpeechRecognitionAlternative对象的数量（也称为“n-best替代项”）|

### 3.7.2. 实例方法

|方法|作用|
|--|--|
|item()|一个标准的getter，允许通过数组语法访问结果中的SpeechRecognitionAlternative对象|

**MDN示例：**

```javascript
recognition.onresult = (event) => {
  // SpeechRecigntionEvent 结果属性返回一个 SpeechRecigntionResultList 对象
  // SpeechRecognitionResultList对象包含SpeechReconcitionResult对象
  // 它有一个getter，所以可以像数组一样访问它
  // 第一个[0]在位置0返回SpeechRecognitionResult
  // 每个SpeechRecognitionResult对象都包含SpeechReconcitionAlternative对象,包含个人结果
  // 这些也有getter，所以可以像数组一样访问它们
  // 第二个[0]在位置0返回SpeechRecognitionAlternative
  // 然后，我们返回SpeechRecognitionAlternative对象的转录属性
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
};
```

## 3.8. SpeechRecognitionResultList

SpeechRecognitionResultList接口表示SpeechReconsitionResult对象的列表，如果结果是在非连续模式下捕获的，则表示单个对象

### 3.8.1. 实例属性

|属性|说明|
|--|--|
|**length**|返回“数组”的长度，即列表中SpeechRecognitionResult对象的数量|

### 3.8.2. 实例方法

|方法|作用|
|--|--|
|item()|一个标准的getter，允许通过数组语法访问列表中的SpeechRecognitionResult对象|

**MDN示例：**与[SpeechRecognitionResult一致](#3.7.2. 实例方法)

# 参考

> [Mdn：Web Speech API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_API#web_speech_%E7%9A%84%E6%A6%82%E5%BF%B5%E5%8F%8A%E7%94%A8%E6%B3%95)
[Mdn：使用 Web Speech API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
[Mdn：SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)
[Mdn：SpeechRecognitionEvent](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionEvent)
[示例：GitHub 上的 Web Speech API repo 的示例程序展示了语音识别及合成](https://github.com/mdn/dom-examples/tree/main/web-speech-api)