功能问题概述

项目中用到了谷歌内核浏览器的文字转语音功能，需要把要朗读的文字展示出来，因此出现了语音还未读完文字已经展示结束的问题（开始使用的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("结束