网页端语音识别与合成主要通过Web Speech API实现，包含SpeechRecognition（语音转文字）和SpeechSynthesis（文字转语音）。首先创建SpeechRecognition实例并设置语言、监听onresult事件获取语音识别结果，调用start()开始识别；再通过SpeechSynthesisUtterance设置朗读内容及语速、音调等参数，调用speak()播放语音。两者结合可实现“你说一句，网页回一句”的交互效果，适用于语音助手、无障碍功能等场景。需注意仅支持HTTPS或本地开发环境，且Chrome支持较好，其他浏览器可能存在兼容性问题，建议在用户触发操作后启动以避免权限拦截。
现在网页端实现语音识别和合成功能，主要依靠浏览器提供的 Web Speech API。这套 API 包含两个核心部分：SpeechRecognition（语音识别）用于将用户的语音转为文字；SpeechSynthesis（语音合成）则把文字转成语音朗读出来。下面分别介绍如何在 JavaScript 中使用它们来实现基础的语音交互功能。
语音识别：让网页听懂你说的话
SpeechRecognition 接口可以捕获麦克风输入并实时转换为文本。目前 Chrome 浏览器支持较好，其他浏览器可能需要前缀或暂不支持。
使用步骤如下：
- 创建一个 SpeechRecognition 实例，通常通过 webkitSpeechRecognition 兼容 Chrome
- 设置识别语言、是否连续识别等参数
- 监听 onresult 事件获取识别结果
- 调用 start() 方法开始识别，stop() 停止
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'zh-CN'; // 设置中文
recognition.continuous = false;
recognition.onresult = function(event) {
const transcript = event.results[0][0].transcript;
console.log('你说的是：', transcript);
// 可在这里触发后续逻辑，比如自动回复
};
recognition.onerror = function(event) {
console.error('识别出错：', event.error);
};
// 开始听写
recognition.start();
语音合成：让网页“开口说话”
SpeechSynthesis 是浏览器内置的文本朗读功能，兼容性良好，无需额外权限。
立即学习“Java免费学习笔记（深入）”；
基本用法包括：
- 使用 window.speechSynthesis 获取语音合成实例
- 创建 SpeechSynthesisUtterance 对象表示要朗读的内容
- 可设置语速、音调、音量和发音语言
- 调用 speak() 方法播放语音
const utter = new SpeechSynthesisUtterance(); utter.text = '你好，我听到了你的声音'; utter.lang = 'zh-CN'; utter.rate = 1; // 语速 utter.pitch = 1; // 音调 window.speechSynthesis.speak(utter);
组合使用：实现简单语音对话
将语音识别和合成结合，就能做出“你说一句，网页回一句”的交互效果。
常见应用场景：
- 语音助手原型：识别关键词后自动播报回应
- 无障碍功能：帮助视障用户与页面互动
- 教育类应用：口语练习时即时反馈
注意处理麦克风权限请求，建议在用户操作（如点击按钮）后启动识别，避免被浏览器拦截。
兼容性与注意事项
当前技术限制需了解：
- SpeechRecognition 在 Firefox、Safari 支持有限，生产环境建议降级处理
- 必须通过 HTTPS 或本地开发服务器运行，否则无法获取麦克风权限
- 移动设备上部分安卓浏览器支持不稳定
- 长时间识别可能因超时中断，可设置 restart 机制
基本上就这些。Web Speech API 让前端语音交互变得简单直接，虽然还有局限，但对于轻量级语音功能已经足够实用。
