利用新版 JavaScript Web Speech API,您可以轻松为网页添加语音识别功能。借助此 API,您可以精确控制并灵活控制 Chrome 25 及更高版本中的语音识别功能。在下面的示例中,识别出的文字几乎会在用户说话后立即显示。
让我们来了解一下背后的故事。首先,我们会检查 webkitSpeechRecognition
对象是否存在,确定浏览器是否支持 Web Speech API。否则,我们建议用户升级浏览器。(由于该 API 仍处于实验阶段,因此目前添加了供应商前缀。)最后,我们创建提供语音接口的 webkitSpeechRecognition
对象,并设置其部分属性和事件处理脚本。
if (!('webkitSpeechRecognition' in window)) {
upgrade();
} else {
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() { ... }
recognition.onresult = function(event) { ... }
recognition.onerror = function(event) { ... }
recognition.onend = function() { ... }
...
continuous
的默认值为 false,表示当用户停止说话时,语音识别功能就会结束。此模式非常适合短输入字段等简单文本。在此演示中,我们将它设为 true,这样一来,即使用户在讲话时暂停,系统仍会继续识别。
interimResults
的默认值为 false,这意味着识别器返回的唯一结果是最终结果,不会更改。该演示会将其设为 true,以便尽早获得可能会有所变化的临时结果。请认真观看演示,灰色文本是临时文本,有时会变化,而黑色文本是来自识别器的响应,标记为最终文本,不会更改。
首先,用户点击麦克风按钮,以触发以下代码:
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
我们将语音识别器“lang”的语言设为用户通过选择下拉列表选择的 BCP-47 值,例如“en-US”表示“英语-美国”。如果未设置此属性,则默认为 HTML 文档根元素和层次结构的语言。Chrome 语音识别功能支持多种语言(请参阅演示来源中的“langs
”表格),以及本演示中未包含的一些从右到左书写的语言,例如 he-IL 和 ar-EG。
设置语言后,我们调用 recognition.start()
来激活语音识别器。开始捕获音频后,它会调用 onstart
事件处理脚本,然后针对每组新结果调用 onresult
事件处理脚本。
recognition.onresult = function(event) {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_transcript = capitalize(final_transcript);
final_span.innerHTML = linebreak(final_transcript);
interim_span.innerHTML = linebreak(interim_transcript);
};
}
该处理程序会将到目前为止收到的所有结果串联成两个字符串:final_transcript
和 interim_transcript
。生成的字符串可能包含“\n”,例如当用户说出“新段落”时,因此我们使用 linebreak
函数将它们转换为 HTML 标记 <br>
或 <p>
。最后,它会将这些字符串设置为其相应 <span>
元素的 innerHTML:final_span
(使用黑色文本设置样式)和 interim_span
(使用灰色文本设置样式)。
interim_transcript
是一个局部变量,在每次调用此事件时都会完全重新构建,因为自上次 onresult
事件以来,所有临时结果可能都已更改。我们可以通过从 0 开始 for 循环来为 final_transcript
执行相同的操作。不过,由于最终文本不会更改,因此我们通过将 final_transcript
设为全局来提高了此处代码的效率,以便此事件可以从 event.resultIndex
启动 for 循环,并且仅附加任何新的最终文本。
这样就搞定啦!代码的其余部分只是为了让所有内容看起来都很美观。它会维护状态,向用户显示一些有用消息,并将麦克风按钮上的 GIF 图片在静态麦克风、麦克风斜线图片以及带有闪烁红点的麦克风动画之间切换。
系统会在调用 recognition.start()
时显示麦克风斜杠图片,然后在 onstart
触发时将其替换为 mic-animate。通常情况下,此过程迅速完成,因此斜杠不明显,但是在首次使用语音识别时,Chrome 需要向用户请求获得使用麦克风的权限。在这种情况下,只有在用户授予权限时,onstart
才会触发。托管在 HTTPS 上的网页不需要反复请求权限,而托管在 HTTP 上的网页则需要。
因此,请积极倾听用户意见,让您的网页焕发活力!
我们很想听听您的反馈意见...
如需了解 Google 如何处理此 API 中的语音数据,请参阅 Chrome 隐私权白皮书。