常州网站建设基本流程联系昆明网站建设

浏览器本身就可以读文字

写功能前一直以为该功能得调用第三方平台的API才可以文字合成语音后用音频播放，原来HTML5已经支持了该功能（TTS）了

SpeechSynthesis 和 SpeechSynthesisUtterance

SpeechSynthesis
SpeechSynthesisUtterance

let speechInstance = new SpeechSynthesisUtterance(text);//创建一个SpeechSynthesisUtterance对象
speechSynthesis.speak(speechInstance);//必须传入SpeechSynthesisUtterance对象

当然我们也可以通过设置不同语言进行播报，前提是当前系统有该语言的语音包。

const voices = speechSynthesis.getVoices();//获取语言包列表

实际拿语音包列表是需要时间的，一开始直接使用可能列表为空，此时可以这样

function getVoices() {return new Promise((resolve, reject) => {let timer;timer = setInterval(() => {if (speechSynthesis.getVoices().length !== 0) {resolve(speechSynthesis.getVoices());clearInterval(timer);}}, 10);})
}
let voices = await getVoices()

如果你念的文字超过80个字，Google 的语音包会断掉，所以使用过程中最好顾虑掉

voices = voices.filter(v => v.name.indexOf('Google') === -1)

然后选择你想要的语言包，例如中文

let lang = 'zh-CN'
speechInstance.voice = voices.find(v => v.lang === lang)

当然我们还可以设置其他，如：语速、音量、音调等，具体请看文档

这里可能有个坑，在用 Chrome 的時候，rate不要超过2，否则会直接恢复成默认值1

speechInstance.rate = .5 //这里可以调节语速

好了，剩下我们就直接调用播放就可以了，但是需要特别说一下，有些阉割版的window可能无法播放，如部分win7系统就是，此时确认语言包存在且谷歌版本是支持 speechSynthesis 还无法出声音，如果对内使用就升级系统版本，对外使用那就考虑第三方的TTS功能了。