h7ml
前端物语
前端物语
积微成著

JavaScript WebkitSpeechRecognition：使用语音识别技术增强 Web 应用程序

WebkitSpeechRecognition 是一种 JavaScript API，它可以让您的 Web 应用程序使用语音识别技术。使用 WebkitSpeechRecognition，您可以让用户通过说话来与您的 Web 应用程序进行交互，这可以使您的应用程序更加易于使用，也可以为用户提供更加人性化的体验。

WebkitSpeechRecognition 的基本概念

WebkitSpeechRecognition 是 Webkit 浏览器中的一个 API，它提供了一种将用户的语音转换为文本的方法。该 API 允许您使用 JavaScript 控制语音识别过程，并获取识别结果。

WebkitSpeechRecognition API 的基本概念如下

SpeechRecognition 对象：SpeechRecognition 对象是 WebkitSpeechRecognition API 的核心对象，它表示语音识别过程。您可以使用 SpeechRecognition 对象来控制语音识别过程，例如开始识别、停止识别等

语音识别事件：SpeechRecognition 对象会触发多个事件，以便您在语音识别过程中获取信息。例如，onresult 事件会在识别成功后触发，onerror 事件会在识别失败时触发

识别结果：语音识别过程的主要输出是识别结果。识别结果是一个包含一个或多个识别的文本字符串的数组。您可以使用识别结果来理解用户说了什么，并相应地更新您的应用程序

如何使用 WebkitSpeechRecognition

要使用 WebkitSpeechRecognition API，您需要遵循以下步骤：

  1. 创建 SpeechRecognition 对象：使用以下代码创建 SpeechRecognition 对象：
1const recognition = new webkitSpeechRecognition();
  1. 设置语言：使用以下代码设置语音识别的语言：
1recognition.lang = window.navigator.language || 'en-US'; // 设置为语言

如果未指定语言，则 WebkitSpeechRecognition 默认使用浏览器的语言。

  1. 监听事件：使用以下代码监听语音识别事件：
1recognition.onresult = (event) => {
2  const result = event.results[event.results.length - 1];
3  console.log(result[0].transcript);
4};

在上面的代码中，我们使用 onresult 事件来监听语音识别结果。当识别成功时，该事件会触发，并将识别结果作为参数传递给事件处理程序。

  1. 开始和停止识别：使用以下代码开始和停止语音识别：
1recognition.start(); // 开始语音识别
2recognition.stop(); // 停止语音识别

在上面的代码中，我们使用 start 方法开始语音识别，使用 stop 方法停止语音识别。

使用 WebkitSpeechRecognition 的示例

使用语音输入来搜索 Baidu

使用语音输入来搜索 Baidu
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>Speech Recognition Example</title>
6  </head>
7  <body>
8    <input type="text" id="search-box" placeholder="Search Baidu" />
9    <button id="search-button">Search</button>
10    <script>
11      const recognition = window.webkitSpeechRecognition ? new webkitSpeechRecognition() : null; // 判断是否支持 webkitSpeechRecognition
12      if (recognition) {
13          recognition.lang = window.navigator.language || 'en-US'; // 设置为语言
14          const searchBox = document.getElementById('search-box');
15          const searchButton = document.getElementById('search-button');
16          recognition.onresult = (event) => {
17              const result = event.results[event.results.length - 1];
18              searchBox.value = result[0].transcript;
19          };
20          searchButton.addEventListener('click', () => {
21              const query = searchBox.value;
22              window.location.href = ` https://www.baidu.com/s?ie=utf-8&wd=${query}`;
23              // });
24              document.addEventListener('keydown', (event) => {
25                  if (event.keyCode === 13) {
26                      event.preventDefault();
27                      searchButton.click();
28                  }
29              });
30              document.addEventListener('keydown', (event) => {
31                  if (event.keyCode === 32 && !event.repeat) {
32                      recognition.start();
33                  }
34              });
35              document.addEventListener('keyup', (event) => {
36                  if (event.keyCode === 32 && !event.repeat) {
37                      recognition.stop();
38                  }
39              });
40          }
41      else
42          {
43              console.log('浏览器不支持语音识别');
44          } // 加上容错处理
45    </script>
46  </body>
47</html>

Vue 3 代码实现

Vue 3 代码实现 @file App.vue
1<template>
2  <div>
3    <button @click="startRecognition">Start Recognition</button>
4    <button @click="stopRecognition">Stop Recognition</button>
5    <p>{{ recognitionStatus }}</p>
6    <p>{{ recognizedText }}</p>
7  </div>
8</template>
9
10<script>
11  import { ref } from 'vue';
12
13  export default {
14    name: 'SpeechRecognition',
15    setup() {
16      const recognition = webkitSpeechRecognition ? new webkitSpeechRecognition() : null;
17      const recognitionStatus = ref('Recognition not started');
18      const recognizedText = ref('');
19
20      if (recognition) {
21        recognition.continuous = true;
22        recognition.interimResults = true;
23
24        recognition.onstart = () => {
25          recognitionStatus.value = 'Recognition started';
26        };
27
28        recognition.onend = () => {
29          recognitionStatus.value = 'Recognition ended';
30        };
31
32        recognition.onresult = (event) => {
33          const recognized = event.results[event.results.length - 1][0].transcript;
34          recognizedText.value = recognized;
35        };
36      } else {
37        recognitionStatus.value = 'Recognition not supported';
38      }
39
40      const startRecognition = () => {
41        if (recognition) {
42          recognition.start();
43        }
44      };
45
46      const stopRecognition = () => {
47        if (recognition) {
48          recognition.stop();
49        }
50      };
51
52      return {
53        startRecognition,
54        stopRecognition,
55        recognitionStatus,
56        recognizedText,
57      };
58    },
59  };
60</script>

React 代码实现

React 代码实现
1import React, { useEffect, useState } from 'react'
2
3function WebkitSpeechRecognition() {
4  const [recognition, setRecognition] = useState(null)
5  const [recognitionStatus, setRecognitionStatus] = useState('Recognition not started')
6  const [recognizedText, setRecognizedText] = useState('')
7
8  useEffect(() => {
9    if (window.webkitSpeechRecognition) {
10      const recognition = new webkitSpeechRecognition()
11      recognition.continuous = true
12      recognition.interimResults = true
13
14      recognition.onstart = () => {
15        setRecognitionStatus('Recognition started')
16      }
17
18      recognition.onend = () => {
19        setRecognitionStatus('Recognition ended')
20      }
21
22      recognition.onresult = (event) => {
23        const recognized = event.results[event.results.length - 1][0].transcript
24        setRecognizedText(recognized)
25      }
26
27      setRecognition(recognition)
28    }
29    else {
30      setRecognitionStatus('Recognition not supported')
31    }
32  }, [])
33
34  const startRecognition = () => {
35    if (recognition)
36      recognition.start()
37  }
38
39  const stopRecognition = () => {
40    if (recognition)
41      recognition.stop()
42  }
43
44  return (
45    <div>
46      <button onClick={startRecognition}>Start Recognition</button>
47      <button onClick={stopRecognition}>Stop Recognition</button>
48      <p>{recognitionStatus}</p>
49      <p>{recognizedText}</p>
50    </div>
51  )
52}
53
54export default WebkitSpeechRecognition

在上面的示例中，我们创建了一个 SpeechRecognition 对象，并将其设置为英语语言。我们还创建了一个搜索框和一个搜索按钮，用户可以在搜索框中输入搜索词并点击搜索按钮来进行搜索。

我们使用 onresult 事件来监听语音识别结果，并将其设置为搜索框的值。我们还使用 addEventListener 方法来监听搜索按钮的点击事件和键盘事件，以便在用户按下回车键或空格键时触发搜索。

最后，我们在按下空格键时使用 start 方法开始语音识别，在松开空格键时使用 stop 方法停止语音识别。

WebkitSpeechRecognition 的局限性

尽管 WebkitSpeechRecognition 可以让 Web 应用程序使用语音识别技术，但它仍然存在一些局限性。以下是一些常见的局限性：

  1. 浏览器支持：WebkitSpeechRecognition API 只能在 Webkit 浏览器中使用，因此无法在其他浏览器中使用。
  2. 语音识别质量：语音识别技术的质量取决于多个因素，例如用户的发音、语音识别引擎的质量等。因此，WebkitSpeechRecognition 可能无法准确地识别所有用户的语音。
  3. 隐私问题：由于 WebkitSpeechRecognition 需要访问用户的麦克风，因此可能会引起隐私问题。如果您的应用程序需要使用 WebkitSpeechRecognition，请确保遵循适当的隐私保护措施。

WebkitSpeechRecognition 兼容性

  • Chrome 25+
  • Edge 79+
  • Firefox 44+
  • Opera 27+
  • Safari 6+ 需要注意的是，不同浏览器可能有不同的语音识别引擎，因此识别结果可能会有所不同。此外，由于 WebkitSpeechRecognition API 是实验性的，因此其行为和特性可能会在未来版本中发生变化。

如果你要使用 WebkitSpeechRecognition API，请务必进行充分的测试和容错处理，以确保你的应用在不同浏览器和设备上都能正常运行。

结论

WebkitSpeechRecognition 是一种有用的 JavaScript API，它可以使您的 Web 应用程序更加易于使用，并为用户提供更加人性化的体验。虽然 WebkitSpeechRecognition 有一些局限性，但它仍然是一种有用的技术，可以让您的应用程序更加智能化。

本文目录