首先实现语音识别，通过webkitSpeechRecognition捕获用户语音并转文本，需设置语言、监听结果与错误事件；再实现语音合成，利用SpeechSynthesisUtterance将文本转语音，可配置语言、语速、音调等参数，并通过speak()播放。
语音识别与合成在现代Web应用中越来越常见，JavaScript结合Web API可以轻松实现这些功能。通过浏览器提供的SpeechRecognition和SpeechSynthesis接口，开发者能让网页“听懂”用户说话并“读出”文字内容。下面介绍如何使用这两个API完成语音识别与语音合成。
语音识别：让网页听懂你说的话
浏览器的 SpeechRecognition 接口（目前主要通过webkitSpeechRecognition支持）允许你捕获用户的语音输入并转换为文本。
基本用法：- 检查浏览器是否支持语音识别
- 创建识别实例，设置参数如语言、是否连续识别
- 监听结果事件，获取识别到的文本
示例代码：
if ('webkitSpeechRecognition' in window) {
const recognition = new webkitSpeechRecognition();
recognition.lang = 'zh-CN'; // 设置中文
recognition.continuous = false; // 单次识别
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);
};
// 开始识别
recognition.start();
} else {
alert('当前浏览器不支持语音识别');
}
语音合成：让网页开口说话
SpeechSynthesis 是Web平台内置的语音合成接口，能将文本转为语音朗读出来，无需额外库。
立即学习“Java免费学习笔记（深入）”；
BEES企业网站管理系统3.4
下载
主要特性： 1、支持多种语言 BEES支持多种语言，后台添加自动生成，可为每种语言分配网站风格。 2、功能强大灵活 BEES除内置的文章、产品等模型外，还可以自定义生成其它模型，满足不同的需求 3、自定义表单系统 BEES可自定义表单系统，后台按需要生成，将生成的标签加到模板中便可使用。 4、模板制作方便 采用MVC设计模式实现了程序与模板完全分离，分别适合美工和程序员使用。 5、用户体验好 前台
- 使用speechSynthesis.getVoices()获取可用发音人
- 创建SpeechSynthesisUtterance实例，设置文本、音调、语速、音量等
- 调用speak()方法播放语音
示例代码：
function speak(text) {
const utterance = new SpeechSynthesisUtterance(text);
// 可选：设置语音参数
utterance.lang = 'zh-CN';
utterance.pitch = 1; // 音调
utterance.rate = 1.1; // 语速
utterance.volume = 1; // 音量
// 可选：选择特定发音人
const voices = window.speechSynthesis.getVoices();
const voice = voices.find(v => v.lang === 'zh-CN');
if (voice) utterance.voice = voice;
window.speechSynthesis.speak(utterance);
}
// 调用示例
speak('你好，这是语音合成的示例');
注意：getVoices()可能需要稍等加载，可添加延迟或监听voiceschanged事件。
实际应用场景建议
这类功能适合用于无障碍访问、语音助手、教育类应用或表单输入辅助。
- 语音识别建议添加启动按钮，避免自动唤醒带来的误操作
- 识别过程可显示“正在聆听”状态，提升用户体验
- 语音合成可配合按钮控制暂停、继续或停止
- 注意在移动端部分浏览器可能限制自动播放，需用户手势触发
