语音驱动的 Web 应用 - Web Speech API 简介

利用新版 JavaScript Web Speech API,您可以轻松为网页添加语音识别功能。借助此 API,您可以精确控制并灵活控制 Chrome 25 及更高版本中的语音识别功能。在下面的示例中,识别出的文字几乎会在用户说话后立即显示。

Web Speech API 演示

演示 / 来源

让我们来了解一下背后的故事。首先,我们会检查 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_transcriptinterim_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 隐私权白皮书