共计 5168 个字符，预计需要花费 13 分钟才能阅读完成。
语音辨认是计算机科学和计算语言学的一个跨学科子畛域。它能够辨认书面语并将其翻译成文本，它也被称为主动语音辨认（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 时，这里有一些提醒：如果您不想在日常生活中聆听，请记住敞开语音辨认应用程序。
本文首次发表于公众号
