JavaScript通过Web Speech API实现语音识别与合成，提升网页交互性。①使用SpeechRecognition接口将语音转文字，适用于搜索、表单输入等场景，需注意浏览器兼容性及HTTPS要求；②利用SpeechSynthesis与SpeechSynthesisUtterance实现文本朗读，可用于无障碍访问或提醒功能；③建议结合UI反馈优化体验，适用于教育、辅助工具等应用。
现在很多网站和应用都开始支持语音交互，JavaScript 在这方面提供了不少原生能力。通过 Web Speech API，开发者可以直接在浏览器中实现语音识别和语音合成，让用户用说话来操作页面，或者让网页“开口说话”。下面介绍这两个功能的基本用法和实际应用场景。
语音识别：SpeechRecognition
语音识别可以把用户的语音转换成文字，适用于搜索、表单输入、语音控制等场景。Web Speech API 提供了 SpeechRecognition 接口（注意：目前主要在 Chrome 浏览器中支持，其他浏览器可能需要使用前缀）。
基本使用步骤：
- 创建一个 SpeechRecognition 实例
- 设置识别语言、是否连续识别等参数
- 监听结果事件，获取识别出的文本
- 启动识别
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'zh-CN'; // 设置中文
recognition.interimResults = false; // 是否返回中间结果
recognition.onresult = function(event) {
const transcript = event.results[0][0].transcript;
console.log('识别结果：', transcript);
document.getElementById('output').textContent = transcript;
};
recognition.onerror = function(event) {
console.error('识别出错：', event.error);
};
// 开始识别
document.getElementById('startBtn').onclick = () => {
recognition.start();
};
用户点击按钮后，浏览器会请求麦克风权限，说话内容会被转为文字并显示出来。
立即学习“Java免费学习笔记（深入）”；
语音合成：SpeechSynthesis
语音合成可以让网页朗读文字，适合无障碍访问、提醒功能或教育类应用。使用 window.speechSynthesis 和 SpeechSynthesisUtterance 即可实现。
基本流程：
- 创建一个 SpeechSynthesisUtterance 对象，传入要朗读的文本
- 可设置语速、音调、音量和发音语言
- 调用 speechSynthesis.speak() 播放声音
const utterance = new SpeechSynthesisUtterance('你好，这是语音合成示例');
utterance.lang = 'zh-CN';
utterance.rate = 1; // 语速
utterance.pitch = 1; // 音调
utterance.volume = 1; // 音量
speechSynthesis.speak(utterance);
你还可以列出系统支持的发音人：
setTimeout(() => {
const voices = speechSynthesis.getVoices();
voices.forEach(v => console.log(v.name, v.lang));
}, 500);
实用建议与注意事项
虽然 Web Speech API 功能强大，但使用时需要注意以下几点：
- 语音识别需要 HTTPS 环境，在本地开发时 localhost 可以例外
- 部分浏览器不支持或需开启实验性功能（如 Chrome 的 flag）
- 移动设备上的兼容性较差，尤其是 iOS Safari 支持有限
- 语音识别是异步过程，网络延迟可能影响体验
- 长时间识别可能导致自动停止，需重新启动
可以结合 UI 给用户明确反馈，比如录音动画、波形图、识别状态提示等，提升交互体验。
基本上就这些。用好语音识别与合成，能让你的网页更具人性化和互动感，特别适合辅助工具、语音助手原型或教育类产品。技术门槛不高，值得一试。
