借助 10 行代码，在您的网站上部署免依赖语音助手

前端

2024-02-05 17:57:44

引言

在当今数字时代，用户体验至关重要。网站和应用程序希望提供流畅、直观的交互，以留住访问者并建立忠诚度。语音助手正迅速成为提升用户体验的宝贵工具。

借助本文，我们将探讨如何使用 Web Speech API 在您的网站上部署一个功能齐全的语音助手，而无需依赖任何外部服务。通过这 10 行代码，我们将解锁语音交互的强大功能，让您的网站更具吸引力和易用性。

Web Speech API：语音技术的基石

Web Speech API 是一组 JavaScript API，为 Web 应用程序提供了语音识别和合成功能。它允许开发者创建语音驱动的交互，例如：

语音输入： 允许用户通过麦克风将语音转换为文本。
语音输出： 将文本转换为语音，实现自然的语音交互。

分步集成

1. 创建一个新的 HTML 文件

创建一个新的 HTML 文件，例如 index.html，并将其与以下代码片段链接：

<script src="https://cdn.jsdelivr.net/npm/web-speech-api@latest/lib/index.js"></script>

这将加载 Web Speech API 库，以便您的网站可以使用其功能。

2. 初始化语音合成

在 window.onload 事件监听器中，初始化语音合成器：

window.onload = function() {
  synth = window.speechSynthesis;
};

3. 设置语言

指定语音合成的语言，例如英语（美国）：

synth.lang = "en-US";

4. 创建语音识别

接下来，创建一个语音识别器：

var recognition = new webkitSpeechRecognition();

5. 设置识别语言

与语音合成器类似，为语音识别器设置语言：

recognition.lang = "en-US";

6. 监听语音输入

使用 onresult 事件监听器监听用户语音输入：

recognition.onresult = function(event) {
  var transcript = event.results[0][0].transcript;
  console.log("语音输入：" + transcript);
  // 在此处执行与语音输入相关的操作
};

7. 开始语音识别

在需要时调用 start() 方法启动语音识别：

recognition.start();

8. 停止语音识别

识别完成后，调用 stop() 方法停止语音识别：

recognition.stop();

9. 合成语音输出

使用 speak() 方法将文本转换为语音输出：

synth.speak(new SpeechSynthesisUtterance("Hello, world!"));

10. 封装语音助手功能

最后，将所有这些功能封装在一个可重用函数中，以简化语音助手在您网站中的使用：

function useVoiceAssistant() {
  // 语音识别
  recognition.start();
  
  // 语音合成
  synth.speak(new SpeechSynthesisUtterance("欢迎使用语音助手！"));
  
  // 其他功能（例如，处理用户命令）
}