新的 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”（例如，当用户说出“new paragraph”时），因此我们使用 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 托管的网页则需要重复请求权限。
所以，让您的网页能够倾听用户心声，让网页更生动有趣！
我们非常期待收到您的反馈...
请参阅 Chrome 隐私权白皮书，了解 Google 如何处理来自此 API 的语音数据。