无需依赖！JS原生实现文字转语音全攻略

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

一、核心API：SpeechSynthesis接口

SpeechSynthesis是Web Speech API的一部分，属于浏览器原生支持的语音合成功能。其核心优势在于：

• 零依赖：无需引入外部库，直接通过JavaScript调用。
• 跨平台：现代浏览器（Chrome、Firefox、Edge、Safari）均支持。
• 灵活性：可控制语速、音调、音量及语音类型。

1.1 基本语法结构

// 1. 创建语音合成实例
const synthesis = window.speechSynthesis;
// 2. 创建语音内容对象
const utterance = new SpeechSynthesisUtterance('Hello, world!');
// 3. 触发语音播放
synthesis.speak(utterance);

上述代码中，SpeechSynthesisUtterance对象承载待朗读的文本，speak()方法将其提交至合成器。

1.2 关键参数配置

通过设置SpeechSynthesisUtterance的属性，可自定义语音表现：

• text：待朗读的文本（字符串）。
• lang：语言代码（如'en-US'、'zh-CN'）。
• rate：语速（默认1，范围0.1~10）。
• pitch：音调（默认1，范围0~2）。
• volume：音量（默认1，范围0~1）。
• voice：指定语音引擎（需通过getVoices()获取）。

示例：配置中文语音

const utterance = new SpeechSynthesisUtterance('你好，世界！');
utterance.lang = 'zh-CN';
utterance.rate = 0.9; // 稍慢语速
utterance.pitch = 1.2; // 稍高音调
window.speechSynthesis.speak(utterance);

二、语音引擎选择与兼容性处理

2.1 获取可用语音列表

不同浏览器支持的语音引擎（如男声、女声）可能不同，需通过getVoices()动态获取：

function listAvailableVoices() {
  const voices = window.speechSynthesis.getVoices();
  voices.forEach(voice => {
    console.log(`Name: ${voice.name}, Lang: ${voice.lang}, Default: ${voice.default}`);
  });
}
// 首次调用可能为空，需监听voiceschanged事件
window.speechSynthesis.onvoiceschanged = listAvailableVoices;
listAvailableVoices(); // 立即触发一次

输出示例：

Name: Google US English, Lang: en-US, Default: true
Name: Microsoft Zira - English (United States), Lang: en-US, Default: false
Name: Microsoft Huihui - Chinese (China), Lang: zh-CN, Default: true

2.2 指定特定语音

通过voice属性绑定具体引擎：

const utterance = new SpeechSynthesisUtterance('欢迎使用');
const voices = window.speechSynthesis.getVoices();
const chineseVoice = voices.find(v => v.lang === 'zh-CN' && v.default);
if (chineseVoice) {
  utterance.voice = chineseVoice;
} else {
  console.warn('未找到中文语音引擎，使用默认语音');
}
window.speechSynthesis.speak(utterance);

2.3 兼容性注意事项

• 浏览器支持：IE及部分旧版浏览器不支持，需通过特性检测回退：

  if (!('speechSynthesis' in window)) {
    alert('您的浏览器不支持文字转语音功能');
  }

• 移动端限制：iOS Safari需用户交互（如点击事件）后触发语音，否则会被拦截。

三、高级功能实现

3.1 暂停与恢复语音

通过pause()和resume()控制播放状态：

const synthesis = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance('这是一段长文本...');
// 播放2秒后暂停
setTimeout(() => {
  synthesis.pause();
  setTimeout(() => synthesis.resume(), 1000); // 1秒后恢复
}, 2000);
synthesis.speak(utterance);

3.2 取消当前语音

调用cancel()可立即停止所有排队的语音：

document.getElementById('stopBtn').addEventListener('click', () => {
  window.speechSynthesis.cancel();
});

3.3 事件监听

SpeechSynthesisUtterance支持以下事件：

• start：语音开始播放时触发。
• end：语音播放完成时触发。
• error：播放出错时触发。

示例：统计朗读时间

const utterance = new SpeechSynthesisUtterance('测试语音时长');
let startTime;
utterance.onstart = () => {
  startTime = Date.now();
};
utterance.onend = () => {
  const duration = (Date.now() - startTime) / 1000;
  console.log(`朗读耗时：${duration.toFixed(2)}秒`);
};
window.speechSynthesis.speak(utterance);

四、实际应用场景

4.1 无障碍阅读器

为视障用户提供网页内容朗读功能：

function readArticle(articleId) {
  const article = document.getElementById(articleId);
  const text = article.textContent.trim();
  if (text) {
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.lang = 'zh-CN';
    window.speechSynthesis.speak(utterance);
  }
}
// 绑定按钮事件
document.getElementById('readBtn').addEventListener('click', () => {
  readArticle('content');
});

4.2 语音通知系统

在Web应用中通过语音提醒用户：

function notify(message) {
  const utterance = new SpeechSynthesisUtterance(message);
  utterance.rate = 1.2; // 加快语速
  window.speechSynthesis.speak(utterance);
}
// 示例：表单提交成功时语音提示
document.getElementById('submitForm').addEventListener('submit', (e) => {
  e.preventDefault();
  notify('表单提交成功！');
});

4.3 多语言学习工具

结合语言切换实现发音练习：

const languages = [
  { code: 'en-US', label: '英语' },
  { code: 'fr-FR', label: '法语' },
  { code: 'zh-CN', label: '中文' }
];
function practicePronunciation(text, langCode) {
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = langCode;
  window.speechSynthesis.speak(utterance);
}
// 绑定语言选择下拉框
document.getElementById('langSelect').addEventListener('change', (e) => {
  const selectedLang = e.target.value;
  practicePronunciation('Hello', selectedLang);
});

五、性能优化与最佳实践

1. 预加载语音引擎：在页面加载时初始化语音列表，避免用户操作时的延迟。

   window.addEventListener('DOMContentLoaded', () => {
     window.speechSynthesis.getVoices(); // 触发voiceschanged事件
   });

2. 限制并发语音：浏览器可能限制同时播放的语音数量，需通过队列管理：

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

3. 错误处理：监听error事件避免静默失败：

   const utterance = new SpeechSynthesisUtterance('测试');
   utterance.onerror = (event) => {
     console.error('语音合成错误:', event.error);
   };

六、总结与展望

通过SpeechSynthesis接口，开发者可轻松实现JS原生文字转语音功能，无需依赖任何外部包或插件。其核心优势在于轻量级、高兼容性及灵活的参数配置。未来，随着Web Speech API的完善，语音交互将在无障碍设计、智能客服等领域发挥更大价值。

行动建议：

1. 在项目中优先使用原生API，减少第三方依赖。
2. 通过特性检测提供降级方案（如显示文本替代语音）。
3. 结合Web Speech RecognitionAPI实现双向语音交互。

通过掌握本文技术，您已具备在任意Web环境中实现文字转语音的能力，为产品增添人性化交互体验。