答案：使用Web Speech API可实现语音识别与合成。首先检查浏览器支持情况，SpeechRecognition用于将语音转文本，需配置语言及参数并监听结果；SpeechSynthesis则将文本转语音，通过设置utterance属性并调用speak()播放。结合二者可构建简单语音助手，注意需在HTTPS或localhost运行，获取麦克风权限，并在voicesloaded后使用语音列表。
要实现一个简单的语音识别或语音合成功能，JavaScript 提供了浏览器原生的 Web Speech API，包含 SpeechRecognition（语音识别）和 SpeechSynthesis（语音合成）两个核心接口。下面分别介绍如何使用它们创建基础应用。
语音识别：听懂用户说的话
SpeechRecognition 接口可以将用户的语音转换为文本。目前主要在 Chrome 和基于 Chromium 的浏览器中支持较好。
使用步骤：- 检查浏览器是否支持 SpeechRecognition
- 创建识别实例并配置参数
- 监听结果事件并处理输出
示例代码：
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new Recognition();
recognition.lang = 'zh-CN'; // 设置语言
recognition.interimResults = false; // 是否返回中间结果
recognition.onresult = (event) => {
const transcript = event.results[0][0].transcript;
console.log('识别结果:', transcript);
document.getElementById('output').textContent = transcript;
};
recognition.onerror = (event) => {
console.error('识别出错:', event.error);
};
// 开始识别
document.getElementById('start-btn').onclick = () => {
recognition.start();
};
} else {
alert('当前浏览器不支持语音识别');
}
语音合成：让网页“说话”
SpeechSynthesis 是 Web Speech API 中用于文本转语音的部分，兼容性较好，几乎所有现代浏览器都支持。
立即学习“Java免费学习笔记（深入）”；
使用方法：
- 获取 speechSynthesis 对象
- 创建 SpeechSynthesisUtterance 实例
- 设置语速、音调、语言等参数
- 调用 speak() 播放语音
示例代码：
function speak(text) {
if ('speechSynthesis' in window) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN'; // 中文发音
utterance.rate = 1; // 语速（0.1 ~ 10）
utterance.pitch = 1; // 音调（0 ~ 2）
// 可选：选择声音
const voices = window.speechSynthesis.getVoices();
const femaleVoice = voices.find(voice => voice.name.includes('Google 普通话'));
if (femaleVoice) {
utterance.voice = femaleVoice;
}
window.speechSynthesis.speak(utterance);
} else {
alert('当前浏览器不支持语音合成');
}
}
// 触发朗读
document.getElementById('speak-btn').onclick = () => {
const text = document.getElementById('input-text').value;
speak(text);
};
完整小应用结构建议
你可以结合两者做一个交互式语音助手雏形：
- 用户点击按钮开始说话 → 语音识别转文字
- 系统根据关键词回复一段文字
- 调用语音合成把回复“念”出来
注意点：
- 语音识别需要 HTTPS 或本地开发环境（如 localhost）
- 首次使用可能需要用户授权麦克风权限
- SpeechSynthesis 需等待 voicesloaded 事件以确保声音可用（可调用 speechSynthesis.getVoices() 前先监听 onvoiceschanged）
