本文演示了如何使用Web Speech API构建一个简单的人工智能聊天机器人。 在本教程中，我们将使用80行JavaScript代码在浏览器中构建一个虚拟助手(如Siri或Google Assistant)。 你可以去下面的网站测试这个应用程序。它会听客户的语音命令，然后用合成语音回复。 https://nhudinhtuan.github.io/mysiri/需要的是:谷歌浏览器(版本25或以上)的文本编辑器。因为Web Speech API还处于实验阶段，所以该应用只能在支持的浏览器上运行:Chrome(版本25或以上)和Edge(版本79或以上)。 我们需要构建哪些组件？要构建这个Web应用程序，我们需要实现四个组件:一个简单的客户界面，用于显示客户说了什么以及助理的回复。 将语音转换为文本 解析文本并执行操作。 将文本转换为语音 客户界面的第一步是创建一个简单的客户界面，它包括一个触发助手的按钮、一个显示客户命令和助手响应的div和一个显示解决方案信息的P组件。 const start BTN = document . createelement(" button ")；startBtn.innerHTML = "开始收听"；const result = document . createelement(" div ")；const processing = document . createelement(" p ")；document . write(" & lt；body & gt& lth1 & gt我的Siri & lt/h1 & gt；& ltp & gt用“你好”、“你好”、“你叫什么名字”、“现在几点了”、“停下来”来试试看，...& lt/p & gt；& lt/body >);document . body . append(start BTN)；document.body.append(结果)；document.body.append(处理)；从语音到文本，我们需要构建一个组件来捕获语音命令，并将其转换为文本以供进一步解决。 在本教程中，我们使用Web语音API的SpeechRecognition。 因为这个API只能在受支持的浏览器中使用，所以我们将显示一条警告消息，并阻止客户在不受支持的浏览器中看到开始按钮。 const SpeechRecognition = window。speech recognition | | window . webkitspeechrecognition；if(type of speech recognition = = = " undefined "){ start BTN . remove()；result.innerHTML = " & ltb & gt浏览器不支持语音API。请下载最新的chrome浏览器。& ltb >；；}我们需要创建一个SpeechRecognition的实例，它可以设置一组各种属性来定制语音识别。 在这个应用程序中，我们将continuous和interimResults设置为true，以便实时显示语音文本。 const recognition = new speech recognition()；recognition.continuous = truerecognition . interim results = true；我们添加一个句柄来解决来自voice API的onresult事件。 在这个解决方案中，我们以文本的形式显示客户的语音命令，并调用函数进程来执行操作。 该流程功能将在下一步中实现。 函数过程(speech_text) { return " ... "；} recognition . on result = event = & gt；{ const last = event . results . length-1；const RES = event . results[last]；const text = res[0]。成绩单；if(RES . is final){ processing . innerhtml = " processing .... "；const response = process(text)；const p = document . createelement(" p ")；p.innerHTML = `您说:$ { text } & lt/br & gt；Siri说:$ { response } `；processing.innerHTML =result . appendchild(p)；//稍后将文本添加到语音中} else { processing . innerhtml = ` listening:$ { text } `；}}我们还需要将客户界面的按钮与识别对象链接起来，以启动/停止语音识别。 让听=假；toggle BTN =()= & gt；{ if(侦听){ recognition . stop()；startBtn.textContent = "开始收听"；} else { recognition . start()；startBtn.textContent = "停止监听"；}听=！听力；};start BTN . addevent listener(" click "，toggle BTN)；求解文本并执行运算。在这一步中，我们将构建一个简单的对话逻辑，并解决一些基本操作。 助理可以回复“你好”，“你叫什么名字？””、“你好吗？”，提供有关当前时间的信息，“停止”收听或打开一个新标签页来搜索它无法回答的问题。 你可以通过使用少量的AI库来进一步扩展这个流程功能，让助手更加智能。 function process(rawText) { //删除空格和小写文本let text = rawText.replace(/\s/g，" ")；text = text . tolowercase()；设response = nullswitch(text){ case“hello”:response = " hi，你好吗？"；打破；case“what ' s your name”:response = "我的名字是Siri。"；打破；案例“howareyou”:回应=“我很好。”；打破；case“whatimeisit”:response = new Date()。toLocaleTimeString()；打破；案例“停”:response = "拜拜！! "；toggle BTN()；//停止监听}如果(！response){ window . open(` http://Google . com/search？q=${rawText.replace("search "，" ")} `, " _ blank ")；返回“我找到了一些关于”+ rawText的信息；}返回响应；}文本到语音最后一步，我们使用Web Speech API的speechSynthesis controller为我们的助手提供语音。 这个API简单明了。 speech synthesis . speak(new speech synthesis internation(response))；就是这样！我们有一个很酷的助手，只有80行代码。 可以在下面的链接中找到该程序的演示。 https://nhudinhtuan.github.io/mysiri/// UI compconst start BTN = document . createelement(" button ")；startBtn.innerHTML = "开始收听"；const result = document . createelement(" div ")；const processing = document . createelement(" p ")；document . write(" & lt；body & gt& lth1 & gt我的Siri & lt/h1 & gt；& ltp & gt用“你好”、“你好”、“你叫什么名字”、“现在几点了”、“停下来”来试试看，...& lt/p & gt；& lt/body >);document . body . append(start BTN)；document.body.append(结果)；document.body.append(处理)；//speech to text const SpeechRecognition = window。speech recognition | | window . webkitspeechrecognition；设toggleBtn = nullif(type of speech recognition = = = " undefined "){ start BTN . remove()；result.innerHTML = " & ltb & gt浏览器不支持语音API。请下载最新的chrome浏览器。& ltb >；；} else { const recognition = new speech recognition()；recognition.continuous = truerecognition . interim results = true；recognition . on result = event = & gt；{ const last = event . results . length-1；const RES = event . results[last]；const text = res[0]。成绩单；if(RES . is final){ processing . innerhtml = " processing .... "；const response = process(text)；const p = document . createelement(" p ")；p.innerHTML = `您说:$ { text } & lt/br & gt；Siri说:$ { response } `；processing.innerHTML =result . appendchild(p)；//text to speech speech synthesis . speak(新语音合成互动(响应))；} else { processing . innerhtml = ` listening:$ { text } `；} }让听=假；toggle BTN =()= & gt；{ if(侦听){ recognition . stop()；startBtn.textContent = "开始收听"；} else { recognition . start()；startBtn.textContent = "停止监听"；}听=！听力；};start BTN . addevent listener(" click "，toggle BTN)；}//processor function process(raw text){ let text = raw text . replace(/\ s/g，" ")；text = text . tolowercase()；设response = nullswitch(text){ case“hello”:response = " hi，你好吗？"；打破；case“what ' s your name”:response = "我的名字是Siri。"；打破；案例“howareyou”:回应=“我很好。”；打破；case“whatimeisit”:response = new Date()。toLocaleTimeString()；打破；案例“停”:response = "拜拜！!"；toggle BTN()；}如果(！response){ window . open(` http://Google . com/search？q=${rawText.replace("search "，" ")} `, " _ blank ")；返回“我找到了${rawText}”的一些信息；}返回响应；}×拖放图像将被下载