答案：使用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免费学习笔记（深入）”；
weenCompany闻名企业网站系统5.3.0 中英文 GB2312
下载
weenCompany闻名企业网站系统(免费开源)是一个功能强大, 使用简单的中英文企业智能建站系统, 您只需要一些基本的计算机知识就可以利用此系统完成中小型企业网站的建设; 是低成本企业网站架设方案之首选CMS系统, 也适合建设个人网站。weenCompany闻名企业网站系统功能：1. 程序代码简洁严谨, 整个系统程序仅2M左右大小.2. 中英文双语版共用一套网站程序, 双语页面实现自由切换.3
- 获取 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）
