今天，从 MDN 上看到了 SpeechSynthesis 这个API。看了下它的介绍。
网页语音 API 的 SpeechSynthesis 接口是语音服务的控制接口；它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，或除此之外的其他命令。
卧槽，这一看不得了啊，这个接口可以调用设备接口读出文字，那这样岂不是就可以在web页面上实现朗读功能。来，试一下：
<script>
function speak() {
let synth = window.speechSynthesis;
let voices = synth.getVoices().filter(voice => voice.lang === 'zh-CN');
if (voices.length == 0) return;
let utterThis = new SpeechSynthesisUtterance(document.querySelector('#js-article-wrapper').textContent);
utterThis.voice = voices[0];
synth.speak(utterThis);
}
function enhanceSpeak() {
speak();
setTimeout(speak, 200)
}
</script>
function speak() {
let synth = window.speechSynthesis;
let voices = synth.getVoices().filter(voice => voice.lang === 'zh-CN');
if (voices.length == 0) return;
let utterThis = new SpeechSynthesisUtterance(document.querySelector('#js-article-wrapper').textContent);
utterThis.voice = voices[0];
synth.speak(utterThis);
}
可在本博客页面打开控制台，并执行代码，体验一下“朗读功能”。(如果没有朗读，可以再调一次 speak()❤️??)
在控制台打印一下 voices 。
应该是不同的硬件设备，不同的操作系统，可用的 voices 不一样，比如 mac 和 windows。
最后，看一下兼容性还不错。
评 论
评论列表