Web Speech API 提供语音识别与合成功能，通过 SpeechRecognition 实现语音转文字，需用户触发并处理权限；使用 SpeechSynthesis 将文字转语音，可设置语言、语速等参数，适合辅助阅读等场景。
Web Speech API 提供了浏览器端的语音识别和语音合成功能，让你可以通过 JavaScript 实现语音输入与文字朗读。它包含两个主要部分：SpeechRecognition（或 SpeechRecognitionAlternative）用于语音识别，SpeechSynthesis 用于语音合成。下面介绍如何使用它们。
语音识别：将语音转为文字
语音识别功能允许用户通过说话，将声音内容实时转换成文本。目前该功能在 Chrome 和 Edge 等基于 Chromium 的浏览器中支持较好。
使用步骤如下：
- 检查浏览器是否支持 SpeechRecognition 或其前缀版本 webkitSpeechRecognition
- 创建识别实例，设置相关参数
- 监听结果事件并获取识别出的文字
recognition.lang = 'zh-CN'; // 设置语言为中文
recognition.interimResults = false; // 是否返回中间结果
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();
调用 start() 方法后，浏览器会请求麦克风权限。用户说完话后，onresult 会触发并返回最终文本。
语音合成：将文字转为语音
语音合成功能可以让网页“朗读”指定的文字，适用于辅助阅读、语音提醒等场景。所有现代浏览器都基本支持 SpeechSynthesis。
使用方式更简单：
- 准备要朗读的文本
- 创建一个 SpeechSynthesisUtterance 实例
- 可选地设置音调、语速、音量和发音语言
- 调用 speechSynthesis.speak() 播放
utterance.lang = 'zh-CN';
utterance.rate = 1; // 语速，0.1 到 10
utterance.pitch = 1; // 音调，0 到 2
utterance.volume = 1; // 音量，0 到 1
speechSynthesis.speak(utterance);
你还可以通过 speechSynthesis.getVoices() 获取可用的发音人列表，并为 utterance.voice 赋值来选择不同声音。
// 获取所有语音（可能需要延迟加载）setTimeout(() => {
const voices = speechSynthesis.getVoices();
utterance.voice = voices.find(v => v.lang === 'zh-CN');
}, 100);
实际应用建议
在真实项目中需要注意以下几点：
- 语音识别需用户主动触发（如点击按钮），不能自动启动
- 注意处理权限拒绝或网络中断的情况
- 语音合成在移动设备上可能有自动播放限制
- 识别结果可能存在误差，尤其是口音或背景噪音较大时
- 可结合 WebSocket 或 AI 接口进一步处理识别后的文本
基本上就这些。Web Speech API 使用简单，适合快速集成基础语音功能。只要注意兼容性和用户体验，就能做出实用的语音交互功能。
