💡 **浏览器Web Speech API实现免费单词发音：** 针对在线背单词网站单词发音难题，本文提出利用浏览器内置的Web Speech API，通过`speechSynthesis.speak()`方法直接调用浏览器自带的文本转语音（TTS）引擎，实现单词的朗读功能，从而避免了对不稳定免费API或昂贵付费API的依赖，降低了开发成本。

🔊 **优化语音选择与朗读控制：** 文章提供了`getBestEnglishVoice()`函数，用于在浏览器提供的语音列表中寻找最适合的英语发音，如“Google US English”等，以提升发音体验。同时，也提到了可以通过调整`utterance.rate`参数来控制朗读语速，为用户提供更个性化的学习方式。

⚠️ **跨平台发音不一致的局限性：** 该方案的主要缺点在于不同浏览器和操作系统所调用的TTS引擎不同，导致发音的音色和自然度存在显著差异，例如Windows上的“机械音”和macOS上的“Siri音”。因此，这种方法更适合作为离线场景或个人学习的小型项目解决方案。

在开发一款在线背单词网站时，遇到的一个核心难题就是 单词发音。

一些免费的 API （比如 dictionaryapi.dev ）虽然好用，但存在 不稳定、可能失效 的问题。

付费的 API （如 Oxford 、Cambridge 、Google Cloud TTS 等）音质好，但价格对个人开发者来说确实偏高。

正在纠结时，我发现其实浏览器自带的 Web Speech API 就能完成发音功能。

使用浏览器自带 TTS

例如下面这段代码，就能让浏览器朗读单词：

function getBestEnglishVoice() {
const voices = speechSynthesis.getVoices();
const preferred = [
"Google US English",
"Google UK English Female",
"Google UK English Male",
"Samantha",
"Alex",
"Microsoft Zira Desktop - English (United States)",
"Microsoft David Desktop - English (United States)"
];
for (let name of preferred) {
const v = voices.find(voice => voice.name === name);
if (v) return v;
}
return voices.find(voice => voice.lang.startsWith("en"));
}

const playPronunciation = (word: string) => {
const utterance = new SpeechSynthesisUtterance(word);
utterance.lang = "en-US";
utterance.voice = getBestEnglishVoice();
// utterance.rate = 0.9; // 可以调节语速
speechSynthesis.speak(utterance);
};


我测试了一些常见单词，效果基本没问题。

缺点就是
不同浏览器 / 系统的发音不一致
Chrome 、Safari 、Edge 各自调用的 TTS 引擎不同，音色和自然度差异很大。
在 Windows 上听起来可能是“微软的机械音”，而在 macOS 上可能是接近 Siri 的发音。


所以，这种方案只适合做 离线场景、个人学习的小项目。

有没有其他方案，求分享。