在浏览器环境里直接调用语音能力，已经不再是实验室特性。Web Speech API 把语音识别与语音合成两套能力以标准接口形式开放给前端，开发者可以在不引入任何外部模型服务的情况下，做出能听会说的智能助手。这套接口由 SpeechRecognition 与 SpeechSynthesis 两个相互独立的部分组成，前者监听麦克风并把语音转写为文本，后者把文本以指定嗓音朗读出来。
语音识别部分的接入与兼容处理
SpeechRecognition 并非所有浏览器都使用同一名称，Chrome 等基于 Chromium 的浏览器将其挂在 window.SpeechRecognition 或 window.webkitSpeechRecognition 上。为了兼容不同环境，通常需要做一个特性探测与回退。在创建实例时，可以设置 lang 属性来指定识别语言，例如 zh-CN 表示普通话。若不加设置，默认会跟随系统语言，可能造成识别准确率下降。
识别过程依赖用户授权麦克风，因此必须在安全上下文（HTTPS 或 localhost）中运行。实例启动后，会持续派发 result、error、end 等事件。其中 result 事件里的 transcript 才是最终文本，而中间结果可通过 isFinal 标记区分。下面是一个最小可用的封装示例：
const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!Recognition) {
console.log('当前浏览器不支持语音识别');
} else {
const rec = new Recognition();
rec.lang = 'zh-CN';
rec.interimResults = false;
rec.onresult = function (event) {
const text = event.results[0][0].transcript;
console.log('识别到：' + text);
};
rec.onerror = function (err) {
console.log('识别错误：' + err.error);
};
rec.onend = function () {
console.log('识别结束');
};
// 需要时调用 rec.start();
}
上述代码没有处理连续对话场景。如果希望助手能一直听，可以在 onend 里再次调用 start，但要注意浏览器对频繁重启有限制，最好加上用户手动开关。另外，移动端 Safari 对 SpeechRecognition 的支持不稳定，生产环境应提供文本输入框作为降级方案。
语音合成部分的音色与播报控制
与识别不同，SpeechSynthesis 的兼容性更好，主流浏览器基本都实现了 speechSynthesis 全局对象。核心方法是 speak()，它接收一个 SpeechSynthesisUtterance 实例。通过该实例可以设置 text、lang、rate、pitch 和 voice。不同系统预装的嗓音差异很大，因此正式播报前应先枚举可用嗓音。
调用 getVoices() 可能在页面加载初期返回空数组，需要监听 voiceschanged 事件。选定中文嗓音后，合成语调会自然很多。以下示例展示如何等待嗓音加载并朗读一段回复：
function speak(text) {
const u = new SpeechSynthesisUtterance(text);
u.lang = 'zh-CN';
const voices = speechSynthesis.getVoices();
const zh = voices.find(function (v) { return v.lang === 'zh-CN'; });
if (zh) { u.voice = zh; }
u.rate = 1;
u.pitch = 1;
speechSynthesis.speak(u);
}
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = function () {
speak('语音助手已就绪');
};
} else {
speak('语音助手已就绪');
}
在智能助手场景里，合成不应阻塞识别。可以在识别到用户指令并处理完毕后，再调用 speak 给出反馈。若用户快速连续提问，应使用 cancel() 中断当前播报，避免声音堆叠。此外，部分浏览器在后台标签页会暂停合成，这是系统级限制，前端无法绕过。
把听与说组合成对话闭环
真正的智能助手需要把识别文本送入业务逻辑，再把业务结果通过合成念出。最简单的形式是用一个状态机：空闲态下等待用户说唤醒词，识别态下收集指令，回复态下合成语音并回到空闲。这种结构不依赖云端自然语言理解，也能完成定时提醒、页面控制等本地任务。
下面示例演示一个极简闭环：用户说包含“时间”的指令，助手就报出当前时间。这里把前面两块代码组合，并加入关键词判断。注意识别结果可能带标点或空格，建议先做归一化再匹配。
rec.onresult = function (event) {
const said = event.results[0][0].transcript.trim();
if (said.indexOf('时间') !== -1) {
const now = new Date().toLocaleTimeString('zh-CN');
speak('现在是' + now);
} else {
speak('我没有听懂这句话');
}
};
当项目变复杂时，可以把指令映射成函数表，用识别文本作为键去查对应动作。若希望助手更聪明，可把文本发到后端大模型，拿到回答后再合成，但那样就超出了纯前端 API 的范畴。即便如此，Web Speech API 仍承担了所有语音相关的繁重工作，让前端工程师以很低成本补齐了人机语音交互的最后一块拼图。
Web_Speech_APISpeechRecognitionSpeechSynthesis修改时间：2026-08-15 20:34:32