借助新的 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 文档根元素和层次结构的 lang。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 事件以来，所有中间结果都可能会发生变化。我们可以对 final_transcript 执行相同的操作，只需将 for 循环从 0 开始即可。不过，由于最终文本永远不会更改，因此我们将 final_transcript 设为全局变量，以提高此处代码的效率，这样此事件便可以在 event.resultIndex 处启动 for 循环，并且只会附加任何新的最终文本。
这样就搞定啦！其余代码只是为了让一切看起来美观。它会维护状态、向用户显示一些信息性消息，并在静态麦克风、麦克风斜线图像和带有闪烁红点的麦克风动画之间切换麦克风按钮上的 GIF 图片。
调用 recognition.start() 时，系统会显示 mic-slash 图片，然后在 onstart 触发时将其替换为 mic-animate。通常，此过程会非常快，以至于用户不会注意到斜线。不过，首次使用语音识别功能时，Chrome 需要向用户请求使用麦克风的权限，在这种情况下，只有在用户允许的情况下，onstart 才会触发。托管在 HTTPS 上的网页无需反复请求权限，而托管在 HTTP 上的网页则需要。
因此，请让您的网页能够倾听用户，让其变得生动起来！
我们非常期待收到您的反馈...
如需了解 Google 如何处理通过此 API 获取的语音数据，请参阅 Chrome 隐私权白皮书。