admin 管理员组

文章数量: 887016

功能问题概述

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

本文标签: 文字 内核 语音 浏览器 音频