admin管理员组文章数量:1026639
功能问题概述
项目中用到了谷歌内核浏览器的文字转语音功能，需要把要朗读的文字展示出来，因此出现了语音还未读完文字已经展示结束的问题（开始使用的setTimeout函数倒计时展示文字，这种方式并不好用，倒计时结束文字收起展示，但是语音还在朗读。）
问题修改
实现文字转语音需要用到 window.speechSynthesis 与 new SpeechSynthesisUtterance()这两个对象。
其中SpeechSynthesisUtterance提供了监听文字转语音开始于结束的函数，通过控制这两个函数来控制文字展示的时间。
//简单实现
handleSpeak(e) {
const msg = new SpeechSynthesisUtterance();
const synth = window.speechSynthesis
msg.text = e //要读的文字
msg.lang = 'zh-CN' //读汉语
msg.volume = 1 //音量
msg.rate = 0.9 //语速
msg.pitch = 0.8 //音色
msg.addEventListener('start', () => {
console.log("开始！！！！！！")
});
synth.speak(msg) //开始读
msg.addEventListener('end', this.handleEndEvent());
},
handleEndEvent() {
console.log("结束功能问题概述
项目中用到了谷歌内核浏览器的文字转语音功能，需要把要朗读的文字展示出来，因此出现了语音还未读完文字已经展示结束的问题（开始使用的setTimeout函数倒计时展示文字，这种方式并不好用，倒计时结束文字收起展示，但是语音还在朗读。）
问题修改
实现文字转语音需要用到 window.speechSynthesis 与 new SpeechSynthesisUtterance()这两个对象。
其中SpeechSynthesisUtterance提供了监听文字转语音开始于结束的函数，通过控制这两个函数来控制文字展示的时间。
//简单实现
handleSpeak(e) {
const msg = new SpeechSynthesisUtterance();
const synth = window.speechSynthesis
msg.text = e //要读的文字
msg.lang = 'zh-CN' //读汉语
msg.volume = 1 //音量
msg.rate = 0.9 //语速
msg.pitch = 0.8 //音色
msg.addEventListener('start', () => {
console.log("开始！！！！！！")
});
synth.speak(msg) //开始读
msg.addEventListener('end', this.handleEndEvent());
},
handleEndEvent() {
console.log("结束版权声明：本文标题：JS 文字转语音 谷歌内核浏览器,实现音频与文字展示时间同步 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/jiaocheng/1729175554a945907.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论