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

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

一些免费的 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 的发音。


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

有没有其他方案,求分享。
623 次点击
所在节点    分享发现
2 条回复
jookr
7 天前
语音合成
https://cloud.tencent.com/document/api/1073/37985
有免费额度可试用

语音纯代码,保存 html 可试听

源码: https://netcut.cn/1j566qj1i
keller
6 天前

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1159349

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX