我们需要创建一个 SpeechRecognition
的实例，可以设置一组各种 属性
来定制语音识别。在这个应用程序中，我们将 continuous
和 interimResults
设置为 true
，以便实时显示语音文本。


复制代码

constrecognition =newSpeechRecognition();
recognition.continuous =true;
recognition.interimResults =true;

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


复制代码

functionprocess(speech_text){
return"....";
}
recognition.onresult =event=>{
constlast = event.results.length -1;
constres = event.results[last];
consttext = res[0].transcript;
if(res.isFinal) {
processing.innerHTML ="processing ....";
constresponse = process(text);
constp =document.createElement("p");
p.innerHTML =`You said:${text}
Siri said:${response}`;
processing.innerHTML ="";
result.appendChild(p);
// add text to speech later
}else{
processing.innerHTML =`listening:${text}`;
}
}

我们还需要将 用户界面的 button
与 recognition
对象链接起来，以启动 / 停止语音识别。


复制代码

letlistening =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
函数，使助理更加智能。


复制代码

functionprocess(rawText){
// remove space and lowercase text
lettext = rawText.replace(/\s/g,"");
text = text.toLowerCase();
letresponse =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 =newDate().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;
}
returnresponse;
}

文本转语音

在最后一步中，我们使用 Web Speech API 的 speechSynthesis
控制器为我们的助理提供语音。这个 API 简单明了。


复制代码

speechSynthesis.speak(newSpeechSynthesisUtterance(response));

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


复制代码

// UI comp
conststartBtn =document.createElement("button");
startBtn.innerHTML ="Start listening";
constresult =document.createElement("div");
constprocessing =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
constSpeechRecognition =window.SpeechRecognition ||window.webkitSpeechRecognition;
lettoggleBtn =null;
if(typeofSpeechRecognition ==="undefined") {
startBtn.remove();
result.innerHTML ="Browser does not support Speech API. Please download latest chrome.";
}else{
constrecognition =newSpeechRecognition();
recognition.continuous =true;
recognition.interimResults =true;
recognition.onresult =event=>{
constlast = event.results.length -1;
constres = event.results[last];
consttext = res[0].transcript;
if(res.isFinal) {
processing.innerHTML ="processing ....";
constresponse = process(text);
constp =document.createElement("p");
p.innerHTML =`You said:${text}
Siri said:${response}`;
processing.innerHTML ="";
result.appendChild(p);
// text to speech
speechSynthesis.speak(newSpeechSynthesisUtterance(response));
}else{
processing.innerHTML =`listening:${text}`;
}
}
letlistening =false;
toggleBtn =()=>{
if(listening) {
recognition.stop();
startBtn.textContent ="Start listening";
}else{
recognition.start();
startBtn.textContent ="Stop listening";
}
listening = !listening;
};
startBtn.addEventListener("click", toggleBtn);
}
// processor
functionprocess(rawText){
lettext = rawText.replace(/\s/g,"");
text = text.toLowerCase();
letresponse =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 =newDate().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}`;
}
returnresponse;
}
×
Drag and Drop
The image will be downloaded