体验一下 Edge 的朗读功能

2022-01-10

在 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 中最接近真人的。当然如果你想要使用其他引擎，也可以自己从中选择。