用 Javascript 代码构建语音助手

简介: 用 Javascript 代码构建语音助手

本文演示了如何使用 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', ...

");
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 = "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', ...

");
document.body.append(startBtn);
document.body.append(result);
document.body.append(processing);
// speech to text
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
let toggleBtn = null;
if (typeof SpeechRecognition === "undefined") {
startBtn.remove();
result.innerHTML = "Browser does not support Speech API. Please download latest chrome.";
} 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);
}
// processor
function 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
相关文章
|
2月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
363 2
|
2月前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
126 58
|
13天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js:从零开始构建后端服务
【10月更文挑战第42天】在数字时代的浪潮中,掌握一门后端技术对于开发者来说至关重要。Node.js,作为一种基于Chrome V8引擎的JavaScript运行环境,允许开发者使用JavaScript编写服务器端代码,极大地拓宽了前端开发者的技能边界。本文将从Node.js的基础概念讲起,逐步引导读者理解其事件驱动、非阻塞I/O模型的核心原理,并指导如何在实战中应用这些知识构建高效、可扩展的后端服务。通过深入浅出的方式,我们将一起探索Node.js的魅力和潜力,解锁更多可能。
|
2月前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
98 1
|
26天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
43 3
原生js炫酷随机抽奖中奖效果代码
|
27天前
|
JavaScript 中间件 关系型数据库
构建高效的后端服务:Node.js 与 Express 的实践指南
在后端开发领域,Node.js 与 Express 的组合因其轻量级和高效性而广受欢迎。本文将深入探讨如何利用这一组合构建高性能的后端服务。我们将从 Node.js 的事件驱动和非阻塞 I/O 模型出发,解释其如何优化网络请求处理。接着,通过 Express 框架的简洁 API,展示如何快速搭建 RESTful API。文章还将涉及中间件的使用,以及如何结合 MySQL 数据库进行数据操作。最后,我们将讨论性能优化技巧,包括异步编程模式和缓存策略,以确保服务的稳定性和扩展性。
|
17天前
|
JSON JavaScript API
深入浅出Node.js:从零开始构建RESTful API
【10月更文挑战第39天】 在数字化时代的浪潮中,API(应用程序编程接口)已成为连接不同软件应用的桥梁。本文将带领读者从零基础出发,逐步深入Node.js的世界,最终实现一个功能完备的RESTful API。通过实践,我们将探索如何利用Node.js的异步特性和强大的生态系统来构建高效、可扩展的服务。准备好迎接代码和概念的碰撞,一起解锁后端开发的新篇章。
|
5天前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
|
1月前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板:D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代,将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识,然后通过一个实际的项目案例,详细阐述了如何将两者结合使用,并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者,这篇文章都将为你提供宝贵的洞见和实用技能。
55 5