本文演示了如何使用 Web Speech API 构建一个简单的人工智能聊天机器人。

在本教程中，我们将使用 80 行 JavaScript 代码在浏览器中构建一个虚拟助理（如 Siri 或 Google 助理）。你可以前往下方网址测试这款应用程序，它将会听取用户的语音命令，然后用合成语音进行回复。
你所需要的是：
Google Chrome（版本 25 以上）
一款文本编辑器
由于 Web Speech API 仍处于试验阶段，该应用程序只能在 受支持的浏览器 上运行：Chrome（版本 25 以上）和 Edge（版本 79 以上）。

我们需要构建哪些组件？
要构建这个 Web 应用程序，我们需要实现四个组件：

一个简单的用户界面，用来显示用户所说的内容和助理的回复。
将语音转换为文本。
处理文本并执行操作。
将文本转换为语音。
用户界面
第一步就是创建一个简单的用户界面，它包含一个按钮用来触发助理，一个用于显示用户命令和助理响应的 div、一个用于显示处理信息的 p组件。

const startBtn = document.createElement("button");
startBtn.innerHTML = "Start listening";
const result = document.createElement("div");
const processing = document.createElement("p");
document.write("

My Siri

Give it a try with 'hello', 'how are you', 'what's your name', 'what time is it', 'stop', ...

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (typeof SpeechRecognition === "undefined") {
startBtn.remove();
result.innerHTML = "Browser does not support Speech API. Please download latest chrome.";
}
我们需要创建一个 SpeechRecognition 的实例，可以设置一组各种 属性 来定制语音识别。在这个应用程序中，我们将 continuous 和interimResults 设置为 true，以便实时显示语音文本。

const recognition = new SpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
我们添加一个句柄来处理来自语音 API 的 onresult 事件。在这个处理程序中，我们以文本形式显示用户的语音命令，并调用函数 process 来执行操作。这个 process 函数将在下一步实现。

function process(speech_text) {
return "....";
}
recognition.onresult = event => {
const last = event.results.length - 1;
const res = event.results[last];
const text = res[0].transcript;
if (res.isFinal) {
processing.innerHTML = "processing ....";
const response = process(text);
const p = document.createElement("p");
p.innerHTML = You said: ${text} </br>Siri said: ${response};
processing.innerHTML = "";
result.appendChild(p);
// add text to speech later
} else {
processing.innerHTML = listening: ${text};
}
}
我们还需要将 用户界面的 button 与 recognition 对象连接起来，以启动 / 停止语音识别。

let listening = false;
toggleBtn = () => {
if (listening) {
recognition.stop();
startBtn.textContent = "Start listening";
} else {
recognition.start();
startBtn.textContent = "Stop listening";
}
listening = !listening;
};
startBtn.addEventListener("click", toggleBtn);
处理文本并执行操作

在这一步中，我们将构建一个简单的会话逻辑并处理一些基本操作。助理可以回复“hello”、“what's your name？”、“how are you？”、提供当前时间的信息、“stop”听取或打开一个新的标签页来搜索它不能回答的问题。你可以通过使用一些 AI 库进一步扩展这个process 函数，使助理更加智能。

function process(rawText) {
// remove space and lowercase text
let text = rawText.replace(/\s/g, "");
text = text.toLowerCase();
let response = null;
switch(text) {
case "hello":
response = "hi, how are you doing?"; break;
case "what'syourname":
response = "My name's Siri."; break;
case "howareyou":
response = "I'm good."; break;
case "whattimeisit":
response = new Date().toLocaleTimeString(); break;
case "stop":
response = "Bye!!";
toggleBtn(); // stop listening
}
if (!response) {
window.open(http://google.com/search?q=${rawText.replace("search", "")}, "_blank");
return "I found some information for " + rawText;
}
return response;
}
文本转语音
在最后一步中，我们使用 Web Speech API 的 speechSynthesis 控制器为我们的助理提供语音。这个 API 简单明了。

speechSynthesis.speak(new SpeechSynthesisUtterance(response));
//代码效果参考：http://www.zidongmutanji.com/bxxx/493676.html

// UI comp
const startBtn = document.createElement("button");
startBtn.innerHTML = "Start listening";
const result = document.createElement("div");
const processing = document.createElement("p");
document.write("

My Siri

Give it a try with 'hello', 'how are you', 'what's your name', 'what time is it', 'stop', ...