JS中的语音合成——Speech Synthesis API：让网页“开口说话”

一、引言：语音交互的Web时代

在移动互联网与智能设备普及的今天，语音交互已成为人机交互的重要方式。从智能音箱到车载系统，语音功能极大提升了用户体验。而在Web开发领域，Speech Synthesis API作为W3C标准的一部分，为浏览器赋予了原生语音合成能力，使网页无需依赖第三方插件即可实现“文字转语音”（TTS）。本文将系统解析这一API的核心功能、使用场景及实践技巧，帮助开发者快速掌握网页语音合成技术。

二、Speech Synthesis API基础概念

1. API定位与兼容性

Speech Synthesis API属于Web Speech API的一部分，旨在通过JavaScript控制浏览器的语音合成功能。其核心对象为SpeechSynthesis，支持主流浏览器（Chrome、Firefox、Edge、Safari等），但需注意：

移动端兼容性：部分Android浏览器可能限制后台语音播放。
隐私策略：浏览器可能要求用户授权麦克风或语音功能。
无障碍支持：对视障用户而言，语音合成是关键辅助技术。

2. 核心对象与流程

API的核心流程可概括为：

获取语音合成接口：通过window.speechSynthesis访问全局对象。
创建语音内容：使用SpeechSynthesisUtterance定义要合成的文本及参数。
配置语音属性：设置语言、音调、语速等。
触发合成：将Utterance对象传递给speechSynthesis.speak()。
控制播放：通过暂停、取消等方法管理语音。

三、核心功能详解

1. 语音内容定义：SpeechSynthesisUtterance

SpeechSynthesisUtterance是语音合成的核心类，用于封装待合成的文本及参数。其主要属性包括：

text：必选，要合成的字符串（支持多语言）。
lang：语言代码（如'zh-CN'、'en-US'），影响发音准确性。
voice：指定语音库（浏览器内置或自定义）。
rate：语速（默认1.0，范围约0.1~10）。
pitch：音调（默认1.0，范围约0.5~2）。
volume：音量（默认1.0，范围0~1）。

示例代码：

const utterance = new SpeechSynthesisUtterance();
utterance.text = '你好，欢迎使用语音合成API！';
utterance.lang = 'zh-CN';
utterance.rate = 1.2;
utterance.pitch = 1.1;

2. 语音库管理：获取可用语音

浏览器内置多种语音库，可通过speechSynthesis.getVoices()获取列表。每个语音对象包含：

name：语音名称（如'Google 普通话'）。
lang：语言代码。
voiceURI：唯一标识符。
default：是否为默认语音。

示例代码：

const voices = window.speechSynthesis.getVoices();
const chineseVoices = voices.filter(voice => voice.lang.includes('zh'));
console.log('可用中文语音：', chineseVoices);

3. 语音控制方法

SpeechSynthesis提供以下关键方法：

speak(utterance)：开始合成语音。
cancel()：取消所有排队的语音。
pause() / resume()：暂停/恢复播放。
getVoices()：异步获取语音库列表（需在用户交互事件中调用以确保兼容性）。

注意事项：

语音合成是异步操作，实际播放可能延迟。
连续调用speak()时，语音会按顺序排队播放。

四、使用场景与案例

1. 无障碍辅助功能

为视障用户朗读网页内容，或提示操作结果。例如：

function readNotification(message) {
  const utterance = new SpeechSynthesisUtterance(message);
  utterance.lang = 'zh-CN';
  window.speechSynthesis.speak(utterance);
}
// 调用示例
readNotification('您有一条新消息，请查收！');

2. 教育与语言学习

辅助语言学习应用，实现单词发音、句子朗读等功能。例如：

function pronounceWord(word, lang) {
  const utterance = new SpeechSynthesisUtterance(word);
  utterance.lang = lang; // 如'en-US'、'fr-FR'
  window.speechSynthesis.speak(utterance);
}
// 调用示例
pronounceWord('Hello', 'en-US');

3. 交互式游戏与叙事

在游戏中添加角色对话语音，或实现动态叙事。例如：

const gameDialog = [
  { text: '欢迎来到冒险世界！', voice: 'Google 普通话' },
  { text: '前方有危险，请小心！', voice: 'Google 粤语' }
];
function playDialog(dialog) {
  dialog.forEach(item => {
    const utterance = new SpeechSynthesisUtterance(item.text);
    // 实际应用中需通过name匹配语音
    utterance.lang = item.voice.includes('粤语') ? 'zh-HK' : 'zh-CN';
    window.speechSynthesis.speak(utterance);
  });
}

五、实践技巧与注意事项

1. 异步加载语音库

getVoices()在某些浏览器中需在用户交互事件（如点击）中调用，否则可能返回空数组。建议：

document.getElementById('speakBtn').addEventListener('click', () => {
  const voices = window.speechSynthesis.getVoices();
  console.log('语音库已加载：', voices.length);
});

2. 语音中断处理

通过onend事件监听语音完成，或onerror处理错误：

utterance.onend = () => {
  console.log('语音播放完成');
};
utterance.onerror = (event) => {
  console.error('语音合成错误：', event.error);
};

3. 性能优化

避免频繁创建Utterance对象，可复用实例。
长文本需分段合成，防止阻塞主线程。
移动端需检测页面可见性（Page Visibility API），避免后台播放被禁止。

4. 跨浏览器兼容性

不同浏览器支持的语音库和语言代码可能不同，建议：

提供默认语音回退机制。
测试目标浏览器的语音效果。

六、未来展望

随着Web技术的演进，Speech Synthesis API可能扩展以下功能：

更精细的语音控制：如情绪、重音调整。
自定义语音库：支持上传或动态加载语音模型。
与语音识别API集成：实现双向语音交互。

七、结语

Speech Synthesis API为Web开发打开了语音交互的大门，其简单易用的API设计使得开发者能快速为网页添加语音功能。从无障碍辅助到教育游戏，这一技术正逐步改变用户与网页的交互方式。未来，随着浏览器对语音功能的持续优化，网页语音合成将更加智能、自然，成为Web应用不可或缺的一部分。

立即尝试：打开浏览器控制台，粘贴以下代码体验语音合成：

const msg = new SpeechSynthesisUtterance('JavaScript语音合成，简单又强大！');
msg.lang = 'zh-CN';
window.speechSynthesis.speak(msg);

探索Web语音交互：JS中的Speech Synthesis API全解析