JavaScript通过Web Speech API实现语音识别与合成，提升网页交互性。①使用SpeechRecognition接口将语音转文字，适用于搜索、表单输入等场景，需注意浏览器兼容性及HTTPS要求；②利用SpeechSynthesis与SpeechSynthesisUtterance实现文本朗读，可用于无障碍访问或提醒功能；③建议结合UI反馈优化体验，适用于教育、辅助工具等应用。
现在很多网站和应用都开始支持语音交互，JavaScript 在这方面提供了不少原生能力。通过 Web Speech API，开发者可以直接在
浏览器
中实现语音识别和语音合成，让用户用说话来操作页面，或者让网页“开口说话”。下面介绍这两个功能的基本用法和实际应用场景。
语音识别：SpeechRecognition
语音识别可以把用户的语音转换成文字，适用于搜索、表单输入、语音控制等场景。Web Speech API 提供了
SpeechRecognition
接口（注意：目前主要在 Chrome 浏览器中支持，其他浏览器可能需要使用前缀）。
基本使用步骤：
创建一个
SpeechRecognition
实例
设置识别语言、是否连续识别等参数
监听结果事件，获取识别出的文本
启动识别
用户点击按钮后，浏览器会请求麦克风权限，说话内容会被转为文字并显示出来。
立即学习
“
Java免费学习笔记（深入）
”；
语音合成：SpeechSynthesis
语音合成可以让网页朗读文字，适合无障碍访问、提醒功能或教育类应用。使用
window.speechSynthesis
和
SpeechSynthesisUtterance
即可实现。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
基本流程：
创建一个
SpeechSynthesisUtterance
对象，传入要朗读的文本
可设置语速、音调、音量和发音语言
调用
speechSynthesis.speak()
播放声音
你还可以列出系统支持的发音人：
实用建议与注意事项
虽然 Web Speech API 功能强大，但使用时需要注意以下几点：
语音识别需要 HTTPS 环境，在本地开发时
localhost
可以例外
部分浏览器不支持或需开启实验性功能（如 Chrome 的 flag）
移动设备上的兼容性较差，尤其是 iOS Safari 支持有限
语音识别是异步过程，网络延迟可能影响体验
长时间识别可能导致自动停止，需重新启动
可以结合 UI 给用户明确反馈，比如录音动画、波形图、识别状态提示等，提升交互体验。
基本上就这些。用好语音识别与合成，能让你的网页更具人性化和互动感，特别适合辅助工具、语音助手原型或教育类产品。技术门槛不高，值得一试。
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();
};
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);