用 80 行 Javascript 代码构建自己的语音助手

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

在本教程中，我们将使用 80 行 JavaScript 代码在浏览器中构建一个虚拟助理（如 Siri 或者 Google 助理）。你可以前往下方网址测试这款应用程序，它将会听取客户的语音命令，而后用合成语音进行回复。

https://nhudinhtuan.github.io/mysiri/

你所需要的是：

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("<body><h1>My Siri</h1><p>Give it a try with 'hello', 'how are you', 'what's your name', 'what time is it', 'stop', ... </p></body>");

document.body.append(startBtn);

document.body.append(result);

document.body.append(processing);

语音转文本

我们需要构建一个组件来捕获语音命令并将其转换为文本，以进行进一步解决。在本教程中，我们使用 Web Speech API 的 SpeechRecognition。因为这个 API 只能在受支持的浏览器中使用，我们将显示警告信息并阻止客户在不受支持的浏览器中看到 Start 按钮。

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

if (typeof SpeechRecognition === "undefined") {

startBtn.remove();

result.innerHTML = "<b>Browser does not support Speech API. Please download latest chrome.<b>";

}

我们需要创立一个 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));

就是这样！我们只用了 80 行代码就有了一个很酷的助理。程序的演示可以在下方链接中找到。

https://nhudinhtuan.github.io/mysiri/

// UI compconst startBtn = document.createElement("button");

startBtn.innerHTML = "Start listening";

const result = document.createElement("div");

const processing = document.createElement("p");

document.write("<body><h1>My Siri</h1><p>Give it a try with 'hello', 'how are you', 'what's your name', 'what time is it', 'stop', ... </p></body>");

document.body.append(startBtn);

document.body.append(result);

document.body.append(processing);// speech to textconst SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

let toggleBtn = null;

if (typeof SpeechRecognition === "undefined") {

startBtn.remove();

result.innerHTML = "<b>Browser does not support Speech API. Please download latest chrome.<b>";

} else {

const recognition = new SpeechRecognition();

recognition.continuous = true;

recognition.interimResults = true;

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);

// text to speech speechSynthesis.speak(new SpeechSynthesisUtterance(response));

} else {

processing.innerHTML = `listening: ${text}`;

}

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);

}// processorfunction process(rawText) {

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();

}

if (!response) {

window.open(`http://google.com/search?q=${rawText.replace("search", "")}`, "_blank");

return `I found some information for ${rawText}`;

}

return response;

}

Drag and Drop

The image will be downloaded