分析 Web Speech API (语音识别和语音合成) 在 JavaScript 中实现自然语言交互的原理和应用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位听众朋友们，大家好！我是今天的主讲人，咱们今天来聊聊 JavaScript 中 Web Speech API 这位“语言大师”，看看它是如何帮助我们实现自然语言交互的。

Web Speech API：让浏览器能听会说

想象一下，你对着电脑说句话，它就能听懂并且执行命令，或者电脑能用清晰自然的声音跟你聊天，是不是感觉很科幻？ Web Speech API 就是让这些成为现实的关键技术。它主要包含两个部分：

SpeechRecognition (语音识别)： 将语音转换成文字。
SpeechSynthesis (语音合成)： 将文字转换成语音。

简单来说，一个负责“听”，一个负责“说”，两者配合，就能构建出各种各样的语音交互应用。

第一部分：SpeechRecognition（语音识别）—— “耳朵”是如何工作的？

咱们先来聊聊 SpeechRecognition，也就是语音识别。它就像浏览器的“耳朵”，能听到你说的话，并且把它转换成文字。

1. 核心对象：SpeechRecognition

SpeechRecognition 对象是语音识别的核心。我们需要创建一个 SpeechRecognition 实例才能开始进行语音识别。

// 创建 SpeechRecognition 对象
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();

// 兼容性处理：不同浏览器可能使用的前缀不同
if (!('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)) {
  console.log("抱歉，您的浏览器不支持语音识别。");
}

上面的代码做了两件事：

创建 SpeechRecognition 对象。
进行兼容性检查。因为不同的浏览器（尤其是老版本）可能使用不同的前缀（如 webkitSpeechRecognition）。

2. 配置 SpeechRecognition 对象

在开始识别之前，我们需要对 SpeechRecognition 对象进行一些配置，例如：

lang： 设置识别的语言。
continuous： 设置是否连续识别（默认是 false，只识别一次）。
interimResults： 设置是否返回临时结果（即识别过程中的中间结果）。

recognition.lang = 'zh-CN'; // 设置语言为中文
recognition.continuous = false; // 设置为单次识别
recognition.interimResults = true; // 允许返回临时结果

3. 事件监听：让“耳朵”灵敏起来

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('result').textContent = result;
};

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

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

代码解读：

onresult 事件处理函数中，event.results 是一个二维数组，包含了所有识别到的结果。
event.results[event.results.length - 1] 获取的是最后一次识别的结果。
[0].transcript 获取的是识别到的文字。

4. 启动和停止语音识别

有了配置和事件监听，我们就可以启动和停止语音识别了：

start()： 启动语音识别。
stop()： 停止语音识别。
abort()： 立即停止语音识别，不返回任何结果。

// 启动语音识别
document.getElementById('startButton').addEventListener('click', () => {
  recognition.start();
});

// 停止语音识别
document.getElementById('stopButton').addEventListener('click', () => {
  recognition.stop();
});

一个简单的语音识别示例

把上面的代码整合起来，就是一个完整的语音识别示例：

<!DOCTYPE html>
<html>
<head>
  <title>语音识别示例</title>
</head>
<body>
  <h1>语音识别</h1>
  <button id="startButton">开始识别</button>
  <button id="stopButton">停止识别</button>
  <p id="result">识别结果：</p>

  <script>
    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
    recognition.lang = 'zh-CN';
    recognition.continuous = false;
    recognition.interimResults = true;

    recognition.onstart = () => {
      console.log('语音识别已启动...');
    };

    recognition.onresult = (event) => {
      const result = event.results[event.results.length - 1][0].transcript;
      console.log('识别结果：' + result);
      document.getElementById('result').textContent = result;
    };

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

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

    document.getElementById('startButton').addEventListener('click', () => {
      recognition.start();
    });

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

将这段代码保存为 index.html，用浏览器打开，点击“开始识别”按钮，对着麦克风说话，你就能在页面上看到识别结果了。

第二部分：SpeechSynthesis（语音合成）—— “嘴巴”是如何说话的？

接下来，我们来看看 SpeechSynthesis，也就是语音合成。它就像浏览器的“嘴巴”，能把文字转换成语音。

1. 核心对象：SpeechSynthesis 和 SpeechSynthesisUtterance

SpeechSynthesis 对象是语音合成的控制器。
SpeechSynthesisUtterance 对象代表一段要朗读的文本。

我们需要先创建一个 SpeechSynthesisUtterance 实例，设置要朗读的文本和一些语音参数，然后使用 SpeechSynthesis.speak() 方法来朗读这段文本。

// 创建 SpeechSynthesisUtterance 对象
const utterance = new SpeechSynthesisUtterance();

// 设置要朗读的文本
utterance.text = '你好，世界！';

// 获取 SpeechSynthesis 对象
const synth = window.speechSynthesis;

// 朗读文本
synth.speak(utterance);

2. 配置 SpeechSynthesisUtterance 对象

我们可以对 SpeechSynthesisUtterance 对象进行很多配置，例如：

text： 要朗读的文本。
lang： 朗读的语言。
voice： 朗读的声音。
volume： 音量（0 到 1）。
rate： 语速（0.1 到 10）。
pitch： 音调（0 到 2）。

utterance.text = '这是一个语音合成的例子。';
utterance.lang = 'zh-CN';
utterance.volume = 0.8; // 音量 80%
utterance.rate = 1.0; // 正常语速
utterance.pitch = 1.2; // 稍微提高音调

3. 选择合适的声音

浏览器提供了多种声音供我们选择。我们可以使用 SpeechSynthesis.getVoices() 方法来获取所有可用的声音。

// 获取所有可用的声音
const voices = synth.getVoices();

// 打印所有声音的信息
voices.forEach(voice => {
  console.log('Voice: ' + voice.name + ', Lang: ' + voice.lang + ', URI: ' + voice.voiceURI);
});

// 选择一个中文女声
const chineseFemaleVoice = voices.find(voice => voice.lang === 'zh-CN' && voice.name.includes('female'));

if (chineseFemaleVoice) {
  utterance.voice = chineseFemaleVoice;
}

注意： SpeechSynthesis.getVoices() 方法返回的声音列表可能需要一些时间才能加载完成。我们可以监听 voiceschanged 事件来确保声音列表已经加载完毕。

synth.onvoiceschanged = () => {
  const voices = synth.getVoices();
  // 在这里处理声音列表
};

4. 事件监听：掌握“嘴巴”的状态

SpeechSynthesisUtterance 对象也有很多事件，我们可以监听这些事件来了解朗读的状态：

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

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

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

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

5. 控制朗读：暂停、恢复和取消

SpeechSynthesis 对象提供了一些方法来控制朗读：

pause()： 暂停朗读。
resume()： 恢复朗读。
cancel()： 取消朗读。

// 暂停朗读
document.getElementById('pauseButton').addEventListener('click', () => {
  synth.pause();
});

// 恢复朗读
document.getElementById('resumeButton').addEventListener('click', () => {
  synth.resume();
});

// 取消朗读
document.getElementById('cancelButton').addEventListener('click', () => {
  synth.cancel();
});

一个简单的语音合成示例

把上面的代码整合起来，就是一个完整的语音合成示例：

<!DOCTYPE html>
<html>
<head>
  <title>语音合成示例</title>
</head>
<body>
  <h1>语音合成</h1>
  <textarea id="textToSpeak" rows="4" cols="50">你好，世界！</textarea><br>
  <button id="speakButton">朗读</button>
  <button id="pauseButton">暂停</button>
  <button id="resumeButton">恢复</button>
  <button id="cancelButton">取消</button>

  <script>
    const synth = window.speechSynthesis;
    let utterance = new SpeechSynthesisUtterance();
    utterance.lang = 'zh-CN';

    synth.onvoiceschanged = () => {
      const voices = synth.getVoices();
      const chineseFemaleVoice = voices.find(voice => voice.lang === 'zh-CN' && voice.name.includes('female'));
      if (chineseFemaleVoice) {
        utterance.voice = chineseFemaleVoice;
      }
    };

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

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

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

    document.getElementById('speakButton').addEventListener('click', () => {
      utterance.text = document.getElementById('textToSpeak').value;
      synth.speak(utterance);
    });

    document.getElementById('pauseButton').addEventListener('click', () => {
      synth.pause();
    });

    document.getElementById('resumeButton').addEventListener('click', () => {
      synth.resume();
    });

    document.getElementById('cancelButton').addEventListener('click', () => {
      synth.cancel();
    });
  </script>
</body>
</html>

将这段代码保存为 index.html，用浏览器打开，在文本框中输入你想让电脑说的话，点击“朗读”按钮，电脑就会用语音朗读出来。

第三部分：Web Speech API 的应用场景

Web Speech API 的应用场景非常广泛，可以用于构建各种各样的语音交互应用：

应用场景	描述	示例
语音助手	允许用户通过语音控制设备或应用程序。	Google Assistant, Siri, 智能家居控制
语音搜索	允许用户通过语音进行搜索。	百度语音搜索, 淘宝语音搜索
语音输入	允许用户通过语音输入文本。	语音笔记, 语音输入法
无障碍访问	帮助残疾人士更方便地使用互联网。	屏幕阅读器, 语音控制
语言学习	帮助学习者练习口语和听力。	语音评测, 语音跟读
游戏	通过语音控制游戏角色或进行游戏交互。	语音控制游戏, 语音聊天游戏
教育	用于创建互动式学习体验。	语音交互式故事书, 语音问答系统

举例：一个简单的语音控制网页示例

我们可以结合语音识别和语音合成，创建一个简单的语音控制网页：

<!DOCTYPE html>
<html>
<head>
  <title>语音控制网页示例</title>
</head>
<body>
  <h1>语音控制网页</h1>
  <p id="command">请说出指令：</p>

  <script>
    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
    const synth = window.speechSynthesis;

    recognition.lang = 'zh-CN';
    recognition.continuous = false;
    recognition.interimResults = false;

    recognition.onresult = (event) => {
      const command = event.results[0][0].transcript;
      document.getElementById('command').textContent = '你说的是：' + command;

      // 根据指令执行相应的操作
      if (command.includes('打开百度')) {
        window.open('https://www.baidu.com');
        speak('正在打开百度');
      } else if (command.includes('打开淘宝')) {
        window.open('https://www.taobao.com');
        speak('正在打开淘宝');
      } else {
        speak('我听不懂你的指令');
      }
    };

    recognition.onend = () => {
      recognition.start(); // 持续监听
    };

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

    function speak(text) {
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.lang = 'zh-CN';
      synth.speak(utterance);
    }

    recognition.start(); // 启动语音识别
  </script>
</body>
</html>

在这个例子中，用户可以通过语音说出“打开百度”或“打开淘宝”等指令，网页会根据指令打开相应的网站，并用语音进行提示。

第四部分：Web Speech API 的局限性

虽然 Web Speech API 非常强大，但它也有一些局限性：

依赖网络连接： 语音识别通常需要连接到云端服务器进行处理，因此需要稳定的网络连接。
识别准确率： 语音识别的准确率受到环境噪音、口音和语速等因素的影响。
浏览器兼容性： 虽然主流浏览器都支持 Web Speech API，但不同浏览器的实现可能存在差异。
隐私问题： 语音识别涉及到用户的语音数据，需要注意保护用户的隐私。

第五部分：Web Speech API 的未来发展趋势

随着人工智能技术的不断发展，Web Speech API 将会变得更加强大和智能：

更高的识别准确率： 随着深度学习技术的应用，语音识别的准确率将会越来越高。
更强大的自然语言处理能力： Web Speech API 将会具备更强大的自然语言处理能力，能够理解更复杂的语音指令。
离线语音识别： 离线语音识别技术将会逐渐成熟，允许用户在没有网络连接的情况下使用语音识别功能。
更丰富的语音合成效果： Web Speech API 将会提供更多样化的语音合成效果，例如模拟不同的情感和口音。

总结

Web Speech API 为我们提供了一种简单而强大的方式来实现自然语言交互。虽然它还有一些局限性，但随着技术的不断发展，它将会变得越来越重要，并在未来的互联网应用中发挥越来越重要的作用。希望今天的讲座能帮助大家更好地理解和使用 Web Speech API，构建出更加智能和人性化的应用。

感谢大家的聆听！有什么问题，欢迎提问。

发表回复 取消回复

发表回复取消回复