JS原生文字转语音（不需安装任何包和插件）

在Web开发中，文字转语音（TTS）功能常用于无障碍访问、语音提示或多媒体交互场景。传统实现方式需依赖第三方库（如responsivevoice.js），但现代浏览器已内置Web Speech API，开发者可通过原生JavaScript直接调用，无需安装任何包或插件。本文将系统讲解如何利用浏览器原生能力实现文字转语音，并覆盖基础用法、高级配置和实际应用场景。

一、Web Speech API：浏览器原生TTS的核心

Web Speech API是W3C标准的一部分，包含语音合成（SpeechSynthesis）和语音识别（SpeechRecognition）两个子模块。其中，SpeechSynthesis接口是文字转语音的核心，其工作原理如下：

1. 语音引擎：浏览器调用操作系统内置的语音引擎（如Windows的SAPI、macOS的NSSpeechSynthesizer）。
2. 语音库：通过SpeechSynthesisVoice对象获取可用的语音列表（包括语言、性别和名称）。
3. 语音控制：通过SpeechSynthesisUtterance对象配置文本内容、语速、音调和音量等参数。

1.1 基础实现代码

// 1. 创建语音合成实例
const synthesis = window.speechSynthesis;
// 2. 配置语音内容
const utterance = new SpeechSynthesisUtterance('Hello, 世界！');
// 3. 选择语音（可选）
const voices = synthesis.getVoices();
utterance.voice = voices.find(voice => voice.lang === 'zh-CN');
// 4. 播放语音
synthesis.speak(utterance);

1.2 兼容性说明

• 支持浏览器：Chrome、Edge、Firefox、Safari（部分版本需用户交互后触发）。
• 移动端：iOS Safari和Android Chrome均支持，但需注意权限控制。
• fallback方案：对于不支持的浏览器，可检测speechSynthesis是否存在，若不存在则提示用户升级浏览器。

二、进阶配置：自定义语音参数

通过SpeechSynthesisUtterance对象，开发者可精细控制语音输出效果。以下是关键参数详解：

2.1 语音选择

// 获取所有可用语音
const voices = window.speechSynthesis.getVoices();
// 筛选中文语音
const chineseVoices = voices.filter(voice => voice.lang.includes('zh'));
// 选择特定语音（按名称或语言）
utterance.voice = voices.find(voice => voice.name === 'Microsoft Huihui Desktop - Chinese (China)');

注意事项：

• 语音列表可能因操作系统和浏览器版本而异。
• 部分语音需下载（首次使用时浏览器会自动缓存）。

2.2 语速与音调控制

utterance.rate = 1.0;    // 语速（0.1~10，默认1）
utterance.pitch = 1.0;   // 音调（0~2，默认1）
utterance.volume = 0.8;  // 音量（0~1，默认1）

应用场景：

• 加快语速用于快速播报（如新闻）。
• 降低音调增强权威感（如导航提示）。

2.3 事件监听

utterance.onstart = () => console.log('语音开始播放');
utterance.onend = () => console.log('语音播放结束');
utterance.onerror = (event) => console.error('播放错误:', event.error);

典型用途：

• 播放结束后执行后续操作（如自动翻页）。
• 错误处理（如语音引擎不可用）。

三、实际应用场景与代码示例

3.1 无障碍阅读器

function readText(elementId) {
  const text = document.getElementById(elementId).textContent;
  const utterance = new SpeechSynthesisUtterance(text);
  // 优先使用中文语音
  const voices = window.speechSynthesis.getVoices();
  utterance.voice = voices.find(voice => voice.lang.includes('zh')) || voices[0];
  window.speechSynthesis.speak(utterance);
}
// HTML示例：<button onclick="readText('content')">朗读</button>

3.2 动态语音提示

function showNotification(message) {
  if (document.hidden) { // 仅在页面不可见时语音提示
    const utterance = new SpeechSynthesisUtterance(message);
    utterance.rate = 1.2;
    window.speechSynthesis.speak(utterance);
  }
}
// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    showNotification('您已切换至后台，请注意操作！');
  }
});

3.3 多语言支持

function speakInLanguage(text, langCode) {
  const utterance = new SpeechSynthesisUtterance(text);
  const voices = window.speechSynthesis.getVoices();
  // 按语言代码匹配语音
  const voice = voices.find(v => v.lang === langCode);
  if (voice) {
    utterance.voice = voice;
  } else {
    console.warn(`未找到${langCode}语音，使用默认语音`);
  }
  window.speechSynthesis.speak(utterance);
}
// 示例：speakInLanguage('Bonjour', 'fr-FR');

四、常见问题与解决方案

4.1 语音列表为空

原因：getVoices()在页面加载时可能返回空数组，需在用户交互后调用（如点击事件）。

解决方案：

let voices = [];
document.getElementById('loadVoices').addEventListener('click', () => {
  voices = window.speechSynthesis.getVoices();
  console.log('可用语音:', voices.map(v => v.name));
});

4.2 语音被阻塞

原因：浏览器安全策略要求语音合成必须由用户交互触发（如点击事件）。

解决方案：

• 将语音调用绑定到按钮点击事件。
• 避免在页面加载时自动播放。

4.3 移动端兼容性

iOS限制：

• Safari需在用户交互后触发语音。
• 语音播放期间页面需保持活动状态（不可锁屏）。

Android优化：

• Chrome对中文语音支持较好，但需测试不同机型。

五、性能优化建议

1. 缓存语音对象：频繁播放相同文本时，可复用SpeechSynthesisUtterance实例。
2. 中断控制：通过speechSynthesis.cancel()停止当前播放。
3. 语音队列管理：使用数组维护待播放语音，避免并发冲突。

const voiceQueue = [];
let isSpeaking = false;
function enqueueSpeech(text) {
  voiceQueue.push(text);
  if (!isSpeaking) {
    playNext();
  }
}
function playNext() {
  if (voiceQueue.length === 0) {
    isSpeaking = false;
    return;
  }
  isSpeaking = true;
  const text = voiceQueue.shift();
  const utterance = new SpeechSynthesisUtterance(text);
  window.speechSynthesis.speak(utterance);
  utterance.onend = playNext;
}

六、总结与展望

通过Web Speech API的SpeechSynthesis接口，开发者可轻松实现跨平台的文字转语音功能，无需依赖任何第三方库。其优势包括：

• 零依赖：减少项目体积和安全风险。
• 高兼容性：覆盖主流桌面和移动浏览器。
• 灵活控制：支持语音选择、语速调整等高级功能。

未来，随着浏览器对语音技术的持续优化，原生TTS的性能和语音质量将进一步提升。开发者可结合语音识别（SpeechRecognition）实现双向交互，打造更自然的语音交互体验。

行动建议：

1. 在现有项目中替换第三方TTS库，降低维护成本。
2. 为无障碍功能添加语音支持，提升用户体验。
3. 测试不同设备和浏览器的兼容性，确保功能稳定性。