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

在Web开发中，文字转语音（TTS）功能常用于辅助阅读、语音导航、无障碍访问等场景。传统实现方式依赖第三方库（如responsivevoice或speak.js），但这些方案可能增加项目体积、引入兼容性问题或涉及隐私风险。本文将介绍如何利用浏览器原生支持的Web Speech API中的SpeechSynthesis接口，无需安装任何包或插件，即可实现高效的文字转语音功能。

一、Web Speech API与SpeechSynthesis简介

Web Speech API是W3C标准的一部分，旨在让Web应用支持语音识别（ASR）和语音合成（TTS）。其中，SpeechSynthesis接口负责将文本转换为语音，其核心优势在于：

1. 原生支持：现代浏览器（Chrome、Firefox、Edge、Safari）均内置实现，无需额外依赖。
2. 多语言支持：可调用系统安装的语音引擎，覆盖多种语言和方言。
3. 灵活控制：支持调整语速、音调、音量等参数。

二、基础实现：从文本到语音

1. 初始化语音合成

通过window.speechSynthesis获取语音合成控制器，调用其speak()方法播放语音。示例代码如下：

function speakText(text) {
  // 创建新的SpeechSynthesisUtterance对象
  const utterance = new SpeechSynthesisUtterance(text);
  // 调用speak方法播放语音
  speechSynthesis.speak(utterance);
}
// 调用示例
speakText("Hello, this is a native TTS demo.");

2. 控制语音参数

SpeechSynthesisUtterance支持丰富的配置选项：

• lang：指定语言（如'en-US'、'zh-CN'），影响发音准确性。
• rate：语速（默认1，范围0.1~10）。
• pitch：音调（默认1，范围0~2）。
• volume：音量（默认1，范围0~1）。
• voice：指定语音引擎（需先获取可用语音列表）。

示例：设置中文语音、较慢语速和较高音调：

function speakChinese() {
  const utterance = new SpeechSynthesisUtterance("你好，这是一段中文语音。");
  utterance.lang = 'zh-CN';
  utterance.rate = 0.8;
  utterance.pitch = 1.5;
  speechSynthesis.speak(utterance);
}

三、进阶功能：语音列表与选择

1. 获取可用语音

通过speechSynthesis.getVoices()获取系统支持的语音列表，返回SpeechSynthesisVoice对象数组，每个对象包含：

• name：语音名称。
• lang：语言代码。
• voiceURI：唯一标识符。
• default：是否为默认语音。

示例：列出所有可用语音：

function listVoices() {
  const voices = speechSynthesis.getVoices();
  console.log("Available voices:");
  voices.forEach(voice => {
    console.log(`- ${voice.name} (${voice.lang})`);
  });
}
// 注意：getVoices()是异步的，可能在页面加载后才能获取完整列表
window.addEventListener('load', listVoices);

2. 选择特定语音

根据语音名称或语言筛选并应用：

function speakWithSelectedVoice(text, voiceName) {
  const voices = speechSynthesis.getVoices();
  const selectedVoice = voices.find(voice => voice.name === voiceName);
  if (selectedVoice) {
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.voice = selectedVoice;
    speechSynthesis.speak(utterance);
  } else {
    console.error("Voice not found.");
  }
}
// 调用示例：使用名为"Google US English"的语音
speakWithSelectedVoice("Selected voice test.", "Google US English");

四、实际应用场景与优化

1. 无障碍访问

为视力障碍用户提供网页内容朗读功能，结合MutationObserver监听DOM变化并自动朗读新增内容：

function setupAccessibilityReader() {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length) {
        const text = mutation.addedNodes[0].textContent;
        if (text && text.trim()) {
          speakText(text);
        }
      }
    });
  });
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

2. 语音控制与中断

通过speechSynthesis.cancel()中断当前语音，或通过speechSynthesis.pause()和speechSynthesis.resume()控制播放状态：

let currentUtterance;
function speakAndAllowInterrupt(text) {
  // 中断当前语音
  speechSynthesis.cancel();
  currentUtterance = new SpeechSynthesisUtterance(text);
  speechSynthesis.speak(currentUtterance);
}
function stopSpeaking() {
  speechSynthesis.cancel();
}

3. 错误处理与兼容性

检查浏览器是否支持SpeechSynthesis，并处理可能的错误：

function isTTSSupported() {
  return 'speechSynthesis' in window;
}
if (isTTSSupported()) {
  console.log("TTS is supported.");
} else {
  console.warn("TTS is not supported in this browser.");
}

五、注意事项与限制

1. 浏览器差异：不同浏览器支持的语音引擎和语言可能不同，需测试目标环境。
2. 自动播放策略：部分浏览器（如Chrome）要求语音播放必须由用户交互（如点击）触发，否则会被阻止。
3. 隐私与权限：无需特殊权限，但语音数据可能在本地或云端处理（取决于浏览器实现）。
4. 性能影响：长时间或大量语音合成可能占用较多资源，建议合理控制。

六、总结与展望

通过SpeechSynthesis接口，开发者可以轻松实现原生文字转语音功能，无需依赖外部库。其支持多语言、灵活参数配置和事件控制，适用于辅助技术、教育、娱乐等多种场景。未来，随着Web Speech API的完善，语音交互将更加自然和智能。

立即尝试：在浏览器控制台运行本文代码，体验原生TTS的便捷与高效！