做单词网站时,我无意中发现了一个离线发音方法

在开发一款在线背单词网站时,遇到的一个核心难题就是 单词发音。一些免费的 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 的发音。所以,这种方案只适合做 离线场景、个人学习的小项目。有没有其他方案,求分享。