语音辨认是计算机科学和计算语言学的一个跨学科子畛域。它能够辨认书面语并将其翻译成文本，它也被称为主动语音辨认（ASR），计算机语音辨认或语音转文本（STT）。
机器学习（ML）是人工智能（AI）的一种利用，它使零碎可能主动学习并从教训中进行改良，而无需进行明确的编程。机器学习在本世纪提供了大多数语音辨认方面的冲破。现在，语音辨认技术无处不在，例如Apple Siri，Amazon Echo和Google Nest。
语音辨认以及语音响应（也称为语音合成或文本到语音（TTS））由Web speech API提供反对。
在本文中，咱们重点介绍JavaScript应用程序中的语音辨认。另一篇文章介绍了语音合成。
语音辨认接口
SpeechRecognition 是辨认服务的控制器接口，在Chrome中称为 webkitSpeechRecognition。SpeechRecognition 解决从辨认服务发送的 SpeechRecognitionEvent。SpeechRecognitionEvent.results 返回一个SpeechRecognitionResultList 对象，该对象示意以后会话的所有语音辨认后果。
能够应用以下几行代码来初始化 SpeechRecognition：
// 创立一个SpeechRecognition对象const recognition = new webkitSpeechRecognition();// 配置设置以使每次辨认都返回间断后果recognition.continuous = true;// 配置应返回长期后果的设置recognition.interimResults = true;// 正确辨认单词或短语时的事件处理程序recognition.onresult = function (event) { console.log(event.results);};ognition.start() 开始语音辨认，而 ognition.stop() 进行语音辨认，它也能够停止（ recognition.abort）。
当页面正在拜访您的麦克风时，地址栏中将显示一个麦克风图标，以显示该麦克风已关上并且正在运行。
咱们用句子对页面说。“hello comma I'm talking period.” onresult 在咱们谈话时显示所有长期后果。
这是此示例的HTML代码：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Speech Recognition</title> <script> window.onload = () => { const button = document.getElementById('button'); button.addEventListener('click', () => { if (button.style['animation-name'] === 'flash') { recognition.stop(); button.style['animation-name'] = 'none'; button.innerText = 'Press to Start'; content.innerText = ''; } else { button.style['animation-name'] = 'flash'; button.innerText = 'Press to Stop'; recognition.start(); } }); const content = document.getElementById('content'); const recognition = new webkitSpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; recognition.onresult = function (event) { let result = ''; for (let i = event.resultIndex; i < event.results.length; i++) { result += event.results[i][0].transcript; } content.innerText = result; }; }; </script> <style> button { background: yellow; animation-name: none; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes flash { 0% { background: red; } 50% { background: green; } } </style> </head> <body> <button id="button">Press to Start</button> <div id="content"></div> </body></html>第25行创立了 SpeechRecognition 对象，第26和27行配置了 SpeechRecognition 对象。
当一个单词或短语被正确辨认时，第28-34行设置一个事件处理程序。
第19行开始语音辨认，第12行进行语音辨认。
在第12行，单击该按钮后，它可能仍会打印出一些音讯。这是因为 Recognition.stop() 尝试返回到目前为止捕捉的SpeechRecognitionResult。如果您心愿它齐全进行，请改用 ognition.abort()。
您会看到动画按钮的代码（第38-51行）比语音辨认代码长。这是该示例的视频剪辑：https://youtu.be/5V3bb5YOnj0
以下是浏览器兼容性表：
网络语音辨认依赖于浏览器本人的语音辨认引擎。在Chrome中，此引擎在云中执行辨认。因而，它仅可在线运行。
语音辨认库
有一些开源语音辨认库，以下是基于npm趋势的这些库的列表：
1. Annyang
Annyang是一个JavaScript语音辨认库，用于通过语音命令管制网站。它建设在SpeechRecognition Web API之上。在下一节中，咱们将举例说明annyang的工作原理。
2. artyom.js
artyom.js是一个JavaScript语音辨认和语音合成库。它建设在Web语音API的根底上，除语音命令外，它还提供语音响应。
3. Mumble
Mumble是一个JavaScript语音辨认库，用于通过语音命令管制网站。它建设在SpeechRecognition Web API之上，这相似于annyang的工作形式。
4. julius.js
Julius是面向语音相干钻研人员和开发人员的高性能，占用空间小的大词汇量间断语音辨认（LVCSR）解码器软件。它能够在从微型计算机到云服务器的各种计算机和设施上执行实时解码。Julis是应用C语言构建的，而julius.js是Julius自以为是JavaScript的移植版。
5.voice-commands.js
voice-commands.js是一个JavaScript语音辨认库，用于通过语音命令管制网站。它建设在SpeechRecognition Web API之上，这相似于annyang的工作形式。
Annyang
Annyang初始化一个 SpeechRecognition 对象，该对象定义如下：
var SpeechRecognition = root.SpeechRecognition || root.webkitSpeechRecognition || root.mozSpeechRecognition || root.msSpeechRecognition || root.oSpeechRecognition;有一些API能够启动或进行annyang：
annyang.start：应用选项（主动重启，间断或暂停）开始监听，例如annyang.start({autoRestart：true，Continuous：false})。annyang.abort：进行收听（进行SpeechRecognition引擎或敞开麦克风）。annyang.pause：进行收听（无需进行SpeechRecognition引擎或敞开麦克风）。annyang.resume：开始收听时不带任何选项。
这是此示例的HTML代码：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Annyang</title> <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script> <script> window.onload = () => { const button = document.getElementById('button'); button.addEventListener('click', () => { if (button.style['animation-name'] === 'flash') { annyang.pause(); button.style['animation-name'] = 'none'; button.innerText = 'Press to Start'; content.innerText = ''; } else { button.style['animation-name'] = 'flash'; button.innerText = 'Press to Stop'; annyang.start(); } }); const content = document.getElementById('content'); const commands = { hello: () => { content.innerText = 'You said hello.'; }, 'hi *splats': (name) => { content.innerText = `You greeted to ${name}.`; }, 'Today is :day': (day) => { content.innerText = `You said ${day}.`; }, '(red) (green) (blue)': () => { content.innerText = 'You said a primary color name.'; }, }; annyang.addCommands(commands); }; </script> <style> button { background: yellow; animation-name: none; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes flash { 0% { background: red; } 50% { background: green; } } </style> </head> <body> <button id="button">Press to Start</button> <div id="content"></div> </body></html>第7行增加了annyang源代码。
第20行启动annyang，第13行暂停annyang。
Annyang提供语音命令来管制网页（第26-42行）。
第27行是一个简略的命令。如果用户打招呼，页面将回复“您说‘你好’。”
第30行是带有 splats 的命令，该命令会贪心地捕捉命令开端的多词文本。如果您说“hi,爱丽丝e”，它的答复是“您向爱丽丝致意。”如果您说“嗨，爱丽丝和约翰”，它的答复是“您向爱丽丝和约翰打招呼。”
第33行是一个带有命名变量的命令。一周的日期被捕捉为 day，在响应中被呼出。
第36行是带有可选单词的命令。如果您说“黄色”，则将其疏忽。如果您提到任何一种原色，则会以“您说的是原色名称”作为响应。
从第26行到第39行定义的所有命令都在第41行增加到annyang中。
... ...
完结
咱们曾经理解了JavaScript应用程序中的语音辨认，Chrome对Web语音API提供了最好的反对。咱们所有的示例都是在Chrome浏览器上实现和测试的。
在摸索Web语音API时，这里有一些提醒：如果您不想在日常生活中聆听，请记住敞开语音辨认应用程序。
本文首次发表于公众号