请问这种网页文本怎么转语音的？

Question

https://dtop.powereasy.net/rz/dyxt/content_24278
这个网站使用了语音读网页内容功能，应该是用的本地TTS，我试了下，支持firefox、Chrome、Edge主流浏览器。请问这种功能是怎么实现的？有没有例子？

Answer 1

• SpeechSynthesis - Web API 接口参考 | MDN

var utterThis = new SpeechSynthesisUtterance('WebFuture系统如何实现跨点读取数据');
utterThis.voice = speechSynthesis.getVoices().find(v=>v.lang == 'zh-CN')
speechSynthesis.speak(utterThis);

• JS中的语音合成——Speech Synthesis API | 前端学习笔记

Answer 2

用Web Speech API，这是浏览器（Chrome、Firefox和Edge）内置的功能。Web Speech API主要包括两个部分：语音识别和语音合成。

var synth = window.speechSynthesis;

var utterance = new SpeechSynthesisUtterance('Hello, world!');

utterance.voice = synth.getVoices().filter(function(voice) { return voice.name == 'Google US English'; })[0];
utterance.pitch = 1; // 0 to 2
utterance.rate = 1; // 0.1 to 10
utterance.volume = 1; // 0 to 1

synth.speak(utterance);