一、核心API：Web Speech API的SpeechSynthesis接口

Web Speech API是W3C标准化的浏览器原生接口，其中SpeechSynthesis模块专门用于文本转语音（TTS）。该接口自Chrome 33、Firefox 49、Edge 79及Safari 14起全面支持，无需任何前置安装。

1.1 基础实现代码

function speakText(text) {
  // 创建新的语音合成实例
  const synthesis = window.speechSynthesis;
  // 创建语音内容对象
  const utterance = new SpeechSynthesisUtterance(text);
  // 执行语音合成
  synthesis.speak(utterance);
}
// 调用示例
speakText("欢迎使用JavaScript原生文字转语音功能");

这段代码通过三步完成核心功能：获取合成器实例、创建包含文本的语音对象、触发播放。

1.2 语音参数配置

SpeechSynthesisUtterance对象支持多种参数配置：

const utterance = new SpeechSynthesisUtterance("配置示例");
utterance.lang = 'zh-CN';       // 设置中文语言
utterance.rate = 1.2;           // 语速（0.1-10）
utterance.pitch = 1.5;          // 音高（0-2）
utterance.volume = 0.8;         // 音量（0-1）
utterance.voice = voices.find(v => v.lang === 'zh-CN'); // 指定语音

二、语音库管理

2.1 获取可用语音列表

浏览器内置的语音库可通过speechSynthesis.getVoices()获取：

function loadVoices() {
  const voices = window.speechSynthesis.getVoices();
  console.log("可用语音列表：", voices);
  // 动态更新语音选择（某些浏览器异步加载）
  window.speechSynthesis.onvoiceschanged = loadVoices;
}
loadVoices();

典型输出包含语音名称、语言、性别等属性，中文环境通常包含微软Huihui、Yaoyao等语音。

2.2 语音选择策略

建议实现语音选择逻辑：

function selectVoice(lang = 'zh-CN', gender = 'female') {
  const voices = window.speechSynthesis.getVoices();
  return voices.find(v => 
    v.lang.includes(lang) && 
    (gender === 'any' || v.voiceURI.includes(gender))
  );
}

三、高级功能实现

3.1 暂停/恢复控制

const synthesis = window.speechSynthesis;
let currentUtterance;
function speakWithControl(text) {
  synthesis.cancel(); // 清除之前的语音
  currentUtterance = new SpeechSynthesisUtterance(text);
  synthesis.speak(currentUtterance);
}
function pauseSpeech() {
  synthesis.pause();
}
function resumeSpeech() {
  synthesis.resume();
}

3.2 语音事件监听

const utterance = new SpeechSynthesisUtterance("事件示例");
utterance.onstart = () => console.log("开始播放");
utterance.onend = () => console.log("播放结束");
utterance.onerror = (e) => console.error("错误:", e);
utterance.onboundary = (e) => console.log("到达边界:", e.charIndex);

四、兼容性处理方案

4.1 浏览器检测

function isSpeechSynthesisSupported() {
  return 'speechSynthesis' in window;
}
if (!isSpeechSynthesisSupported()) {
  alert("您的浏览器不支持文字转语音功能，请使用Chrome/Firefox/Edge最新版");
}

4.2 移动端适配

移动设备需要用户交互触发语音：

document.getElementById('speakBtn').addEventListener('click', () => {
  speakText("移动端需要点击触发");
});

五、实际应用场景

5.1 无障碍阅读器

class AccessibilityReader {
  constructor(element) {
    this.element = element;
    this.init();
  }
  init() {
    this.element.addEventListener('click', () => {
      const text = this.element.textContent;
      speakText(text);
    });
  }
}
// 使用示例
new AccessibilityReader(document.getElementById('article'));

5.2 多语言学习工具

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

六、性能优化建议

语音缓存：重复文本可复用SpeechSynthesisUtterance对象
内存管理：及时调用speechSynthesis.cancel()清除队列
异步处理：对长文本进行分块处理（每块≤200字符）
错误重试：实现指数退避重试机制

七、完整示例：带UI控制的语音播放器

<div id="tts-controller">
  <textarea id="text-input" rows="5" cols="50">输入要转换的文字</textarea>
  <select id="voice-select"></select>
  <button onclick="speak()">播放</button>
  <button onclick="pauseSpeech()">暂停</button>
  <button onclick="resumeSpeech()">继续</button>
  <button onclick="synthesis.cancel()">停止</button>
</div>
<script>
const synthesis = window.speechSynthesis;
let currentUtterance;
function loadVoices() {
  const voiceSelect = document.getElementById('voice-select');
  const voices = synthesis.getVoices();
  voiceSelect.innerHTML = voices
    .filter(v => v.lang.includes('zh') || v.lang.includes('en'))
    .map(v => `<option value="${v.voiceURI}">${v.name} (${v.lang})</option>`)
    .join('');
}
function speak() {
  const text = document.getElementById('text-input').value;
  const voiceURI = document.getElementById('voice-select').value;
  const voices = synthesis.getVoices();
  const voice = voices.find(v => v.voiceURI === voiceURI);
  synthesis.cancel();
  currentUtterance = new SpeechSynthesisUtterance(text);
  currentUtterance.voice = voice;
  synthesis.speak(currentUtterance);
}
// 初始化
loadVoices();
window.speechSynthesis.onvoiceschanged = loadVoices;
</script>

八、常见问题解决方案

语音不可用：检查浏览器是否支持，更新至最新版本
中文语音缺失：确保系统安装了中文语音包（Windows需安装中文语言包）
移动端无声：确认在用户交互事件中触发，且设备音量已打开
Safari兼容性：需在HTTPS环境下或localhost开发环境使用

通过以上技术实现，开发者可以完全基于浏览器原生能力构建功能完善的文字转语音系统，适用于教育、无障碍、语音交互等多个领域。实际开发中建议结合Web Audio API实现更复杂的音频处理，但基础TTS功能已能满足80%的常见需求。

如何用JS原生实现文字转语音？无需插件的完整指南