借助新的 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 事件以来，所有中间结果都可能已发生变化。我们只需将 for 循环的起始值设为 0，即可对 final_transcript 执行相同的操作。不过，由于最终文本永远不会更改，因此我们通过将 final_transcript 设置为全局变量，使此事件可以从 event.resultIndex 开始执行 for 循环，并且仅附加任何新的最终文本，从而使此处的代码更高效。
大功告成！其余代码只是为了让一切看起来更漂亮。它会保持状态，向用户显示一些信息性消息，并根据麦克风按钮上的 GIF 图片在静态麦克风、带斜线的麦克风图片和带有红色圆点的动态麦克风之间切换。
当调用 recognition.start() 时，系统会显示麦克风斜线图片，然后在 onstart 触发时将其替换为麦克风动画。通常，这种情况发生得非常快，以至于用户不会注意到斜杠，但首次使用语音识别时，Chrome 需要征得用户同意才能使用麦克风，在这种情况下，只有在用户允许权限时，onstart 才会触发。托管在 HTTPS 上的网页无需反复请求权限，而托管在 HTTP 上的网页则需要。
因此，请让网页能够听取用户的意见，从而让网页充满活力！
我们很想听听您的反馈意见…
如需了解我们的隐私权政策，请参阅了解 Chrome 中的隐私权（更新日期：2026 年 6 月 16 日）。