获得学士学位后，我开始在一个名为NLP的小组工作。 顾名思义，我们专注于自然语言处理（NLP）技术。 当时，最流行的两种技术是VoiceXML标准和Java小程序。 他们两个都有问题。 第一个仅受Opera支持。 第二个用于将数据发送到服务器并根据用户发出的命令执行操作，这需要大量代码和时间。 今天情况有所不同。 由于引入了专用的JavaScript API，使用语音识别从未如此简单。 本文将向您介绍此API，称为Web Speech API。
语音识别具有多种实际应用。 多亏了Siri和S-Voice之类的软件，越来越多的人熟悉了这一概念。 这些应用程序可以极大地改善用户（尤其是残障人士）执行任务的方式。 在网站中，用户可以使用自己的声音浏览页面或填充表单字段。 用户也可以在驾驶时与页面进行交互，而不会将视线移开。 这些不是平凡的用例。
什么是Web Speech API？
于2012年底推出的Web Speech API ，使Web开发人员可以在Web浏览器中提供语音输入和文本到语音输出功能。 通常，使用标准语音识别或屏幕阅读器软件时，这些功能不可用。 该API负责保护用户的隐私。 在允许网站通过麦克风访问语音之前，用户必须明确授予权限。 有趣的是，权限请求与getUserMedia API相同，尽管它不需要网络摄像头。 如果运行此API的页面使用HTTPS协议，则浏览器仅请求一次权限，否则每次启动新进程时都会请求该权限。
Web Speech API定义了一个复杂的接口，称为SpeechRecognition ，可以在此处看到其结构。 由于两个主要原因，本文不会涵盖规范中描述的所有属性和方法。 首先是，如果您已经看过该界面，那么它太复杂了，无法在一篇文章中介绍。 其次，正如我们将在下一部分中看到的那样，只有一个浏览器支持此API，并且其实现非常有限。 因此，我们将仅介绍已实现的方法和属性。
该规范断言， API本身与底层的语音识别和合成实现无关，并且可以支持基于服务器和基于客户端/嵌入式的识别和合成。
它允许两种类型的识别：一次识别和连续识别。 在第一种类型中，识别一旦用户停止讲话就结束，而在第二种类型中，当调用stop()方法时，识别结束。 在第二种情况下，我们仍然可以通过附加一个调用stop()方法的处理程序（例如通过按钮stop()来允许用户结束识别。 识别结果作为假设列表以及每个假设的其他相关信息提供给我们的代码。
Web Speech API的另一个有趣的功能是它允许您指定语法对象 。 详细解释什么是语法，不在本文的讨论范围之内。 您可以将其视为定义语言的一组规则。 使用语法的优势在于，由于语言可能性的限制，通常可以产生更好的结果。
由于Chrome 11中引入了已经实现的x-webkit-speech属性，因此该API可能不会令您感到惊讶。主要区别在于Web Speech API允许您实时查看结果并利用语法。 通过查看如何使用HTML5语音输入字段 ，您可以了解有关此属性的更多信息。
现在，您应该对这个API的含义以及它的功能有了一个很好的了解，让我们检查一下它的属性和方法。
方法和性质
要实例化语音识别器，请使用如下功能： speechRecognition() ：
var recognizer = new speechRecognition();该对象公开以下方法：
-
onstart：设置一个回调，当识别服务开始以识别目的开始收听音频时将触发该回调。 -
onresult：设置语音识别器返回结果时触发的回调。 该事件必须使用SpeechRecognitionEvent接口。 -
onerror：设置发生语音识别错误时触发的回调。 该事件必须使用SpeechRecognitionError接口。 -
onend：设置服务断开连接时触发的回调。 无论原因为何，都必须始终在会话结束时生成事件。
除了这些方法之外，我们还可以使用以下属性配置语音识别对象：
-
continuous：设置识别类型（单次或连续）。 如果将其值设置为true我们将具有连续的识别能力，否则该过程将在用户停止讲话后立即结束。 默认情况下，它设置为false。 -
lang：指定识别语言。 默认情况下，它对应于浏览器语言。 -
interimResults：指定我们是否需要中期结果。 如果将其值设置为true则可以访问临时结果，该结果可以显示给用户以提供反馈。 如果值为false，则仅在识别结束后才能获得结果。 默认情况下，它设置为false。
作为result事件处理程序的参数，我们收到了SpeechRecognitionEvent类型的对象。 后者包含以下数据：
-
results[i]：包含识别结果的数组。 每个数组元素对应一个识别的单词。 -
resultIndex：当前识别结果索引。 -
results[i].isFinal：一个布尔值，指示结果是最终的还是中间的。 -
results[i][j]：包含替代识别单词的2D数组。 第一个元素是最有可能被识别的单词。 -
results[i][j].transcript：已识别单词的文本表示形式。 -
results[i][j].confidence：结果正确的概率。 取值范围是0〜1。
浏览器兼容性
上一节指出，Web Speech API的提案是在2012年末提出的。到目前为止，唯一支持此API的浏览器是Chrome，其版本25开始，但该规范的子集非常有限。 此外，Chrome使用webkit前缀支持此API。 因此，在Chrome中创建语音识别对象的过程如下所示：
var recognizer = new webkitSpeechRecognition();演示版
本部分提供了实际的Web Speech API演示。 演示页面包含一个只读字段和三个按钮。 需要该字段来显示识别语音的转录。 前两个按钮启动和停止识别过程，而第三个按钮清除操作日志和错误消息。 该演示还允许您使用两个单选按钮在单次模式和连续模式之间进行选择。
由于只有Chrome支持此API，因此我们会执行检查，如果失败，则会显示错误消息。 验证支持后，我们将初始化语音识别对象，这样我们就不必在用户每次单击“播放演示”按钮时都执行此操作。 我们还附加了一个处理程序以开始识别过程。 注意，在处理程序内部，我们还设置了识别模式。 我们需要在处理程序中选择模式，以确保它反映用户的选择（每次新的识别开始时都需要刷新）。
此处提供了代码的实时演示。 哦，只是为了好玩，试着说一个脏话。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Web Speech API Demo</title>
<style>
body
{
max-width: 500px;
margin: 2em auto;
font-size: 20px;
}
h1
{
text-align: center;
}
.buttons-wrapper
{
text-align: center;
}
.hidden
{
display: none;
}
#transcription,
#log
{
display: block;
width: 100%;
height: 5em;
overflow-y: scroll;
border: 1px solid #333333;
line-height: 1.3em;
}
.button-demo
{
padding: 0.5em;
display: inline-block;
margin: 1em auto;
}
</style>
</head>
<body>
<h1>Web Speech API</h1>
<h2>Transcription</h2>
<textarea id="transcription" readonly="readonly"></textarea>
<span>Results:</span>
<label><input type="radio" name="recognition-type" value="final" checked="checked" /> Final only</label>
<label><input type="radio" name="recognition-type" value="interim" /> Interim</label>
<h3>Log</h3>
<div id="log"></div>
<div class="buttons-wrapper">
<button id="button-play-ws" class="button-demo">Play demo</button>
<button id="button-stop-ws" class="button-demo">Stop demo</button>
<button id="clear-all" class="button-demo">Clear all</button>
</div>
<span id="ws-unsupported" class="hidden">API not supported</span>
<script>
// Test browser support
window.SpeechRecognition = window.SpeechRecognition ||
window.webkitSpeechRecognition ||
null;
if (window.SpeechRecognition === null) {
document.getElementById('ws-unsupported').classList.remove('hidden');
document.getElementById('button-play-ws').setAttribute('disabled', 'disabled');
document.getElementById('button-stop-ws').setAttribute('disabled', 'disabled');
} else {
var recognizer = new window.SpeechRecognition();
var transcription = document.getElementById('transcription');
var log = document.getElementById('log');
// Recogniser doesn't stop listening even if the user pauses
recognizer.continuous = true;
// Start recognising
recognizer.onresult = function(event) {
transcription.textContent = '';
for (var i = event.resultIndex; i < event.results.length; i++) {
if (event.results[i].isFinal) {
transcription.textContent = event.results[i][0].transcript + ' (Confidence: ' + event.results[i][0].confidence + ')';
} else {
transcription.textContent += event.results[i][0].transcript;
}
}
};
// Listen for errors
recognizer.onerror = function(event) {
log.innerHTML = 'Recognition error: ' + event.message + '<br />' + log.innerHTML;
};
document.getElementById('button-play-ws').addEventListener('click', function() {
// Set if we need interim results
recognizer.interimResults = document.querySelector('input[name="recognition-type"][value="interim"]').checked;
try {
recognizer.start();
log.innerHTML = 'Recognition started' + '<br />' + log.innerHTML;
} catch(ex) {
log.innerHTML = 'Recognition error: ' + ex.message + '<br />' + log.innerHTML;
}
});
document.getElementById('button-stop-ws').addEventListener('click', function() {
recognizer.stop();
log.innerHTML = 'Recognition stopped' + '<br />' + log.innerHTML;
});
document.getElementById('clear-all').addEventListener('click', function() {
transcription.textContent = '';
log.textContent = '';
});
}
</script>
</body>
</html>结论
本文介绍了Web Speech API，并说明了它如何帮助改善用户体验，尤其是对于那些残障人士。 此API的实现尚处于初期阶段，只有Chrome提供了有限的功能集。 该API的潜力令人难以置信，因此请密切注意其演变。 最后一点，不要忘了演示，这确实很有趣。
957
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
