Web Speech API 和 Annyang
Web Speech API 和 Annyang 是前端工程师常用的语音识别技术专用工具，他们能够让我们应用程序具备语音识别技术能力，完成语音录入、语音指令等服务。下边将详解他们功能和应用。
Web Speech API
Web Speech API 是 W3C 明确提出的一项规范，能让电脑浏览器具备语音识别技术和语音识别能力。它带来了 SpeechRecognition 和 SpeechSynthesis 2个 API。
SpeechRecognition API 能将语音转换成文字，SpeechSynthesis API 能将文本转换成语音。这种 API 全是多线程的，因而我们应该为它们设定调用函数来处理鉴别过程和结果生成结论。
下列是一个应用 Web Speech API 完成语音识别技术的实例：
const recognition = new webkitSpeechRecognition();
recognition.lang = 'zh-CN';
recognition.onresult = function(event) {
const text = event.results[0][0].transcript;
console.log(`你说的是：${text}`);
};
recognition.start();
在后面的实例中，我们先创建了一个 SpeechRecognition 目标，随后增设了鉴别语言表达为汉语。然后，大家增设了 onresult 调用函数来处理鉴别结论。最终，大家启用了 start() 方式逐渐识别语音。
在我们讨论语音识别技术时，就不得不提语音识别。语音识别是一种将文本转换为视频语音的专业技术。Web Speech API一样带来了语音识别作用，根据SpeechSynthesis接口来达到。
SpeechSynthesis接口给予了一组方式，可用于形成视频语音。我们可以用SpeechSynthesisUtterance目标来特定要生成的文字，说话速度，声调，响声等特性。比如，下列编码特定了要生成的文字为“Hello World”，说话速度为0.8，声调为1，视频语音为英文（国外）：
var msg = new SpeechSynthesisUtterance();
msg.text = "Hello World";
msg.rate = 0.8;
msg.pitch = 1;
msg.lang = 'en-US';
随后，我们可以用SpeechSynthesis的speak()方式来合成语音：
window.speechSynthesis.speak(msg);
此外，SpeechSynthesis接口还提供了一些事情，用以监管语音识别的一个过程。比如，当视频语音开播时，会触发start事情；当语音播放结束后，会开启end事情。
msg.onstart = function(event) {
console.log('Speech started');
}
msg.onend = function(event) {
console.log('Speech ended');
}
Annyang
Annyang则是一个根据JavaScript的开源库，它能通过正则匹配将语音录入转化为对应的指令，随后实行对应的实际操作。Annyang封装形式了SpeechRecognition API，因而能够在电脑浏览器中获得语音识别技术的功效。
简单点来说，Annyang应该是SpeechRecognition的封装形式和拓展，带来了更高效的语音指令控制方法。
下列是一个应用 Annyang 完成语音指令的实例：
<!DOCTYPE html>
<html>
<head>
<title>Annyang Example</title>
</head>
<body>
<h1>Annyang Example</h1>
<p>Say "hello" or "open website" followed by a website name to see it in a new tab.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
<script>
if (annyang) {
// 界定匹配规则和响应函数
var commands = {
'hello': function () { alert('Hello world!'); },
'open *website': function (website) { window.open('http://' website); }
};
// 加上指令
annyang.addCommands(commands);
// 运行语音识别技术
annyang.start();
}
</script>
</body>
</html>
在后面的实例中，我们先重新定义了2个指令，一个是问好，一个是打开网站。随后，大家启用了 addCommands() 方式把这些指令导入到 Annyang 中。最终，大家启用了 start() 方式逐渐识别语音指令。
当大家说hello时，就会直接弹出来Hello world!弹出窗口。
当大家说open baidu.com时，就会直接弹出来搜索百度网址。
Web Speech API 和 Annyang 都是很有使用的语音识别技术库，他们能够让我们应用程序具备更多互动性和便利性，让消费者体验到不一样的体验。
本站是一个以CSS、JavaScript、Vue、HTML为中心的前端开发技术网址。我们的使命是为众多前端工程师者提供全方位、全方位、好用的前端工程师专业知识和技术服务。 在网站上，大家可以学到最新前端开发技术，掌握前端工程师最新发布的趋势和良好实践。大家提供大量实例教程和实例，让大家可以快速上手前端工程师的关键技术和程序。 本站还提供了一系列好用的工具软件，帮助你更高效地开展前端工程师工作中。公司提供的一种手段和软件都要经过精心策划和改进，能够帮助你节约时间精力，提高研发效率。 此外，本站还拥有一个有活力的小区，你可以在社区里与其它前端工程师者沟通交流技术性、交流经验、处理问题。我们坚信，街道的能量能够帮助你能够更好地进步与成长。 在网站上，大家可以寻找你需要的一切前端工程师网络资源，使您成为一名更加出色的网页开发者。欢迎你添加我们的大家庭，一起探索前端工程师的无限潜能!