如何在网页中正确实现泰卢固语（Telugu）文字的语音合成-html教程-PHP中文网

如何在网页中正确实现泰卢固语（Telugu）文字的语音合成

本文详解为何原生 Web Speech API 不支持 te-IN 泰卢固语语音合成，并提供兼容性检测、可用语言枚举及动态语音选择的完整解决方案。

本文详解为何原生 web speech api 不支持 `te-in` 泰卢固语语音合成，并提供兼容性检测、可用语言枚举及动态语音选择的完整解决方案。

Web Speech API 的 speechSynthesis 虽然在现代浏览器中广泛可用，但其语言支持高度依赖底层操作系统与浏览器内置语音引擎，而非单纯由语言代码（如 te-IN）决定。遗憾的是，截至 2024 年主流版本（Chrome 120+、Edge 120+、Firefox 125+），泰卢固语（te-IN）仍未被任何主流浏览器原生支持——调用 speech.lang = 'te-IN' 不会报错，但系统将自动回退至默认语音（常为英语或印地语），导致“无声”或“发音错误”。

✅ 正确做法是：先获取并列出当前浏览器实际可用的所有语音（voices），再让用户选择最接近的替代方案（如 hi-IN 印地语语音对部分泰卢固词汇有基础音近支持，或 en-US 配合罗马化拼写）。以下为生产就绪的实现：

<h1>泰卢固语发音辅助工具</h1>

const synth = window.speechSynthesis;
const voiceSelect = document.getElementById('voiceSelect');
const wordInput = document.getElementById('wordInput');
const form = document.getElementById('pronounceForm');

let availableVoices = [];

// 安全获取语音列表（兼容 Chrome 异步加载）
function loadVoices() {
  availableVoices = synth.getVoices();
  if (availableVoices.length === 0) {
    console.warn('No voices loaded yet. Retrying in 500ms.');
    setTimeout(loadVoices, 500);
    return;
  }

  // 按语言代码排序，优先显示印度地区语音
  availableVoices.sort((a, b) => {
    const langA = a.lang.toLowerCase();
    const langB = b.lang.toLowerCase();
    if (langA.includes('in') && !langB.includes('in')) return -1;
    if (!langA.includes('in') && langB.includes('in')) return 1;
    return langA.localeCompare(langB) || a.name.localeCompare(b.name);
  });

  // 渲染下拉选项（保留原始 voice 对象索引）
  voiceSelect.innerHTML = availableVoices
    .map((voice, i) => `<option value="${i}">${voice.lang} — ${voice.name} ${voice.localService ? '(本地)' : '(云端)'}</option>`)
    .join('');
}

// Chrome/Edge 需监听 onvoiceschanged；Firefox 可立即调用
if (synth.onvoiceschanged !== undefined) {
  synth.onvoiceschanged = loadVoices;
} else {
  loadVoices();
}

// 提交处理
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = wordInput.value.trim();
  if (!text) return;

  const selectedIndex = voiceSelect.value;
  if (selectedIndex === '') {
    alert('请先选择一个语音引擎');
    return;
  }

  const utterance = new SpeechSynthesisUtterance(text);
  utterance.voice = availableVoices[selectedIndex];
  utterance.rate = 0.9; // 略慢速提升清晰度
  utterance.pitch = 1.1;

  // 防止连续点击堆积
  synth.cancel();
  synth.speak(utterance);

  // 可选：输入框失焦避免移动端键盘遮挡
  wordInput.blur();
});

⚠️ 关键注意事项：

不要硬编码 speech.lang = 'te-IN'：该值无效且无降级提示，必须通过 synth.getVoices() 动态匹配；
首次加载需等待 onvoiceschanged：Chrome 中 getVoices() 在页面加载时可能返回空数组；
泰卢固语用户建议策略：
- 使用 hi-IN 语音 + 罗马化泰卢固词（如 namaste, enduku）获得较稳定发音；
- 或引导用户安装支持 te-IN 的第三方 TTS 扩展（如 Chrome 的 Read Aloud），再通过 postMessage 集成；
无障碍增强：为按钮添加 aria-live="polite"，并在发音开始/结束时更新状态提示。