Web Speech API 网页语音 API

621 字

3 分钟

Web Speech API 网页语音 API

2024-07-03

2024-07-20

博客

语音合成

/

javascript

概述#

Web Speech API（网页语音 API）是一组用于实现语音识别（Speech Recognition）和语音合成（Speech Synthesis）功能的浏览器 API。它允许开发者在网页上利用语音交互，使用户能够通过语音输入和语音输出与网页进行交互。

Web Speech API 提供了以下两个主要的功能模块：

语音合成（Speech Synthesis）：允许将文本转换为语音输出。通过使用 SpeechSynthesis 对象，网页可以将文本转换为语音，并播放出来。这个功能模块依赖于底层系统的语音合成引擎。
语音识别（Speech Recognition）：允许将用户的语音输入转换为文本。通过使用 SpeechRecognition 对象，网页可以监听用户的语音输入，并将其转换为文本，以便进行语音命令、语音搜索、语音填写表单等应用。这个功能模块依赖于底层系统的语音识别引擎。

技术文档

开始#

语音合成#

1
function speak(text) {
2
  let textContent = new SpeechSynthesisUtterance(text);
3
  speechSynthesis.speak(textContent);
4
}

属性

voice 设置将用于说出语音的声音，默认 getVoices() 方法获取当前设备支持的语音选项数组的第一个。
rate 设置将用于说出语音的速度，默认 1，范围 0-2。
pitch 设置将用于说出语音的音调，默认 1，范围 0-2。
volume 设置将用于说出语音的音量，默认1，范围 0-1。

完整示例

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>Document</title>
8
  </head>
9
  <body>
10
    <button onclick="speak('hello world')">Speak</button>
11
    <select id="voiceSelect"></select>
12
  </body>
13

14
  <script>
15
    let utterance = new SpeechSynthesisUtterance("hello");
16
    let voices = [];
17
    let select = document.getElementById("voiceSelect");
18
    speechSynthesis.onvoiceschanged = function (event) {
19
      voices = speechSynthesis.getVoices();
20
      createVoiceOption(voices);
21

22
    };
23
    select.onchange = function () {
24
      utterance.voice = voices.find(
25
        (voice) => voice.name === select.selectedOptions[0].getAttribute("data-name")
26
      );
27
      utterance.lang = select.selectedOptions[0].getAttribute("data-lang");
28
    };
29
    function createVoiceOption(voices) {
30
      for (let i = 0; i < voices.length; i++) {
31
        const option = document.createElement("option");
32
        option.textContent = `${voices[i].name} (${voices[i].lang})`;
33
        if (voices[i].default) {
34
          option.textContent += " — DEFAULT";
35
        }
36
        option.setAttribute("data-lang", voices[i].lang);
37
        option.setAttribute("data-name", voices[i].name);
38
        document.getElementById("voiceSelect").appendChild(option);
39
      }
40
    }
41
    function speak(text) {
42
      utterance.text=text;
43
      speechSynthesis.speak(utterance);
44
    }
45
  </script>
46
</html>

语音识别#

完整示例

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <title>语音识别示例</title>
5
</head>
6
<body>
7
  <button id="startButton">开始识别</button>
8
  <div id="result"></div>
9

10
  <script>
11
    const startButton = document.getElementById('startButton');
12
    const resultDiv = document.getElementById('result');
13
    let recognition;
14

15
    // 创建 SpeechRecognition 对象
16
    if ('webkitSpeechRecognition' in window) {
17
      recognition = new webkitSpeechRecognition();
18
    } else if ('SpeechRecognition' in window) {
19
      recognition = new SpeechRecognition();
20
    } else {
21
      console.error('浏览器不支持语音识别功能');
22
    }
23

24
    // 配置识别参数
25
    recognition.continuous = true;
26
    recognition.lang = 'zh-CN'; // 设置识别语言，默认为浏览器语言
27

28
    // 识别结果回调
29
    recognition.onresult = function(event) {
30
      const transcript = event.results[event.results.length - 1][0].transcript;
31
      resultDiv.textContent = transcript;
32
      console.log(transcript)
33
    };
34

35
    // 开始识别
36
    startButton.addEventListener('click', function() {
37
      recognition.start();
38
    });
39
  </script>
40
</body>
41
</html>