4

体验一下 Edge 的朗读功能

 2 years ago
source link: https://hsingko.github.io/post/2022/01/10/play-edge-tts/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

体验一下 Edge 的朗读功能

Edge: hello~

2022-01-10 · 1 分钟 · hsingko

在 Edge 浏览器中打开当前页面，在下面的文本框输入你喜欢的文本，然后点击 Play 试试：

如果一切顺利，那么你的浏览器已经开始朗读了，这个功能的原理是调用了 Edge 内置的 tts 模块，具体的 Javascript API 调用实例可以参考这里 。

简单来说，需要构造一个 SpeechSynthesisUtterance 对象，这个对象里面包装了需要进行朗读的文本，以及指定其他的朗读配置；之后再由 window.speechSynthesis.speak(utterance) 方法开始朗读，下面的 demo 可以供你参考：

var synUtterance = new SpeechSynthesisUtterance("hello, world!");
synUtterance.voice = window.speechSynthesis.getVoices()[9]
synUtterance.lang = 'zh-CN'
synUtterance.volume = 20.0;
synUtterance.rate = 1;
synUtterance.pitch = 1;

const eventList = ["start", "end", "mark", "pause", "resume", "error", "boundary"];
eventList.forEach((event) => {
    synUtterance.addEventListener(event, (speechSynthesisEvent) => {
        console.log(`Fired '${speechSynthesisEvent.type}' event at time '${speechSynthesisEvent.elapsedTime}' and character '${speechSynthesisEvent.charIndex}'.`);
    });
});
window.speechSynthesis.speak(synUtterance);

注意 window.speechSynthesis.getVoices()[9] 这一段， getVoices 方法能获取到多个 Edge 内置的语音引擎，而 [9] 是能朗读中文的晓晓，她应该是目前为止中文 tts 中最接近真人的。当然如果你想要使用其他引擎，也可以自己从中选择。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK