JS `Web Speech API`：语音识别与语音合成的深度应用

各位观众老爷，大家好！今天咱们来聊聊JS里一个挺好玩的东西：Web Speech API。这玩意儿能让你用JavaScript跟浏览器“聊天”，让它听懂你说啥，还能让它用各种声音跟你说话，是不是有点儿意思？咱们今天就来扒一扒这Web Speech API的底裤，看看它到底能干点啥，怎么用，以及一些需要注意的坑。

一、Web Speech API是个啥？

简单来说，Web Speech API就是浏览器提供的一套接口，让你能用JS控制语音识别（Speech Recognition）和语音合成（Speech Synthesis），也就是“听”和“说”。有了它，你就能用语音控制网页，或者让网页“念”文章给你听，解放你的双手和双眼。

二、语音识别（Speech Recognition）

语音识别，就是让浏览器听懂你说的话，然后把它转换成文字。这玩意儿在语音助手、语音搜索、语音输入等方面都很有用。

1. 核心对象：SpeechRecognition

要玩语音识别，首先得创建一个SpeechRecognition对象。不同浏览器可能有不同的实现，所以咱们得稍微处理一下：

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

if (!SpeechRecognition) {
  console.error("你的浏览器不支持语音识别API！");
} else {
  console.log("语音识别API已加载！");
}

这段代码先尝试用标准的SpeechRecognition，如果浏览器不支持，就尝试用webkitSpeechRecognition（Chrome和Safari以前用的）。如果两个都不支持，那就说明你的浏览器太老了，该换了。

2. 创建SpeechRecognition实例

有了SpeechRecognition类，就可以创建实例了：

const recognition = new SpeechRecognition();

3. 设置语言

默认情况下，浏览器会尝试识别你的系统语言。但你也可以手动设置识别的语言：

recognition.lang = 'zh-CN'; // 设置为中文
//或者
recognition.lang = 'en-US'; // 设置为英文

lang属性使用BCP 47语言标记，比如zh-CN表示简体中文，en-US表示美国英语。

4. continuous和interimResults属性

continuous: 控制识别是否连续进行。
- true: 连续识别，直到手动停止。
- false: 单次识别，说完一句话就停止。
interimResults: 控制是否返回临时结果。
- true: 在识别过程中，会不断返回识别到的临时结果，方便实时显示。
- false: 只在识别完成后返回最终结果。

recognition.continuous = true; // 连续识别
recognition.interimResults = true; // 返回临时结果

5. 事件监听

SpeechRecognition对象有很多事件可以监听，常用的有：

start: 语音识别开始时触发。
result: 识别出结果时触发。
end: 语音识别结束时触发。
error: 发生错误时触发。

recognition.onstart = () => {
  console.log("语音识别开始...");
};

recognition.onresult = (event) => {
  const result = event.results[event.results.length - 1][0].transcript;
  console.log("识别结果：", result);

  // 这里可以把识别结果显示在页面上
  document.getElementById('output').textContent = result;
};

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

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

onresult事件的event对象包含识别结果。event.results是一个二维数组，每一行代表一次识别结果，每一列代表一个备选项（不同的识别可能性）。通常我们取最后一次识别结果的第一个备选项（可能性最高）。

6. 开始和停止识别

recognition.start(); // 开始语音识别

// 稍后停止识别
setTimeout(() => {
  recognition.stop(); // 停止语音识别
}, 5000); // 5秒后停止

7. 完整示例

<!DOCTYPE html>
<html>
<head>
  <title>语音识别示例</title>
</head>
<body>
  <h1>语音识别</h1>
  <button id="startButton">开始识别</button>
  <p id="output"></p>

  <script>
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

    if (!SpeechRecognition) {
      document.getElementById('output').textContent = "你的浏览器不支持语音识别API！";
    } else {
      const recognition = new SpeechRecognition();
      recognition.lang = 'zh-CN';
      recognition.continuous = true;
      recognition.interimResults = true;

      recognition.onstart = () => {
        document.getElementById('output').textContent = "语音识别开始...";
      };

      recognition.onresult = (event) => {
        const result = event.results[event.results.length - 1][0].transcript;
        document.getElementById('output').textContent = result;
      };

      recognition.onend = () => {
        document.getElementById('output').textContent = "语音识别结束";
      };

      recognition.onerror = (event) => {
        document.getElementById('output').textContent = "语音识别出错：" + event.error;
      };

      document.getElementById('startButton').addEventListener('click', () => {
        recognition.start();
      });
    }
  </script>
</body>
</html>

这个示例创建了一个按钮，点击后开始语音识别，并将识别结果显示在页面上。

三、语音合成（Speech Synthesis）

语音合成，就是让浏览器把文字转换成语音，念给你听。这玩意儿在阅读器、语音提示、语音助手等方面都很有用。

1. 核心对象：SpeechSynthesis和SpeechSynthesisUtterance

SpeechSynthesis: 控制语音合成的核心对象，全局只有一个实例，可以通过window.speechSynthesis获取。
SpeechSynthesisUtterance: 代表一段要合成的文本。

2. 创建SpeechSynthesisUtterance实例

const utterance = new SpeechSynthesisUtterance('你好，世界！');

3. 设置语音

你可以选择不同的语音来朗读文本。首先要获取可用的语音列表：

let voices = [];

function populateVoiceList() {
  voices = speechSynthesis.getVoices();

  // 打印语音列表
  voices.forEach(voice => {
    console.log(voice.name, voice.lang);
  });

  //你可以选择一个语音，比如：
  //utterance.voice = voices.find(voice => voice.lang === 'zh-CN'); // 选择中文语音
  //或者
  //utterance.voice = voices.find(voice => voice.name === 'Ting-Ting'); // 选择特定名称的语音

}

// 语音列表可能需要一段时间才能加载完成，所以要监听voiceschanged事件
speechSynthesis.onvoiceschanged = populateVoiceList;

// 立即调用一次，防止某些浏览器没有触发voiceschanged事件
populateVoiceList();

speechSynthesis.getVoices()返回一个SpeechSynthesisVoice对象的数组，每个对象代表一个可用的语音。你可以根据语音的名称（name）或语言（lang）来选择合适的语音。

4. 设置其他属性

SpeechSynthesisUtterance对象还有其他一些属性可以设置：

rate: 语速，范围是0.1到10，默认是1。
pitch: 音调，范围是0到2，默认是1。
volume: 音量，范围是0到1，默认是1。

utterance.rate = 1.2; // 设置语速为1.2倍
utterance.pitch = 1.1; // 设置音调为1.1倍
utterance.volume = 0.8; // 设置音量为0.8倍

5. 事件监听

SpeechSynthesisUtterance对象也有很多事件可以监听，常用的有：

start: 开始朗读时触发。
end: 朗读结束时触发。
pause: 暂停朗读时触发。
resume: 恢复朗读时触发。
error: 发生错误时触发。

utterance.onstart = () => {
  console.log("开始朗读...");
};

utterance.onend = () => {
  console.log("朗读结束");
};

utterance.onpause = () => {
  console.log("暂停朗读");
};

utterance.onresume = () => {
  console.log("恢复朗读");
};

utterance.onerror = (event) => {
  console.error("朗读出错：", event.error);
};

6. 开始朗读

speechSynthesis.speak(utterance); // 开始朗读

7. 暂停、恢复和取消朗读

speechSynthesis.pause(); // 暂停朗读
speechSynthesis.resume(); // 恢复朗读
speechSynthesis.cancel(); // 取消朗读

8. 完整示例

<!DOCTYPE html>
<html>
<head>
  <title>语音合成示例</title>
</head>
<body>
  <h1>语音合成</h1>
  <textarea id="textInput" rows="4" cols="50">你好，世界！</textarea><br>
  <button id="speakButton">开始朗读</button>

  <script>
    const textInput = document.getElementById('textInput');
    const speakButton = document.getElementById('speakButton');
    const speechSynthesis = window.speechSynthesis;

    let voices = [];

    function populateVoiceList() {
      voices = speechSynthesis.getVoices();
    }

    speechSynthesis.onvoiceschanged = populateVoiceList;
    populateVoiceList();

    speakButton.addEventListener('click', () => {
      const utterance = new SpeechSynthesisUtterance(textInput.value);
      //utterance.voice = voices.find(voice => voice.lang === 'zh-CN'); // 选择中文语音
      speechSynthesis.speak(utterance);
    });
  </script>
</body>
</html>

这个示例创建了一个文本框和一个按钮，点击按钮后，浏览器会朗读文本框中的内容。

四、注意事项和坑

浏览器兼容性：虽然Web Speech API已经比较成熟，但不同浏览器的支持程度可能有所不同。建议在使用前进行兼容性测试。
用户权限：语音识别需要用户授权麦克风权限。如果用户拒绝授权，语音识别将无法工作。
网络连接：语音识别通常需要连接到服务器进行处理。如果网络连接不稳定，可能会影响识别效果。
语音质量：语音识别的准确率受语音质量的影响。清晰、无噪音的语音更容易被识别。
语音列表加载：语音合成的语音列表可能需要一段时间才能加载完成。建议监听voiceschanged事件，确保语音列表加载完成后再进行语音选择。
移动端 移动端使用时，某些浏览器可能需要用户交互（比如点击按钮）才能触发语音识别/合成，这是为了防止恶意网站未经用户允许就偷偷录音/播放语音。

五、总结

Web Speech API为我们提供了一种方便的方式，让JavaScript可以与语音进行交互。无论是语音识别还是语音合成，都有着广泛的应用前景。虽然在使用过程中可能会遇到一些坑，但只要注意兼容性、用户权限、网络连接等问题，就能开发出有趣的语音应用。

六、一些进阶玩法

语音控制游戏：你可以用语音控制游戏角色的移动、攻击等操作，让游戏更加有趣。
语音助手：你可以用语音控制网页的各种功能，比如搜索、导航、播放音乐等，打造一个专属的语音助手。
智能家居：你可以用语音控制家里的电器，比如灯、空调、电视等，实现智能家居的梦想。
结合AI 将识别出的文本发送到AI模型，进行语义理解，可以实现更复杂的功能。

好了，今天的讲座就到这里。希望大家能够掌握Web Speech API的基本用法，并发挥自己的创意，开发出更多有趣的语音应用。记住，编程的乐趣在于探索和创造！咱们下期再见！

发表回复 取消回复

发表回复取消回复