语音播报（vue3+百度语音合成)

直接引用该接口，在text后面加自定义文字的UTF-8编码，在js中可以用encodeURI(文本)编码，将返回的值拼接在text之后即可。
参数解释：
lan：固定值zh。语言选择,目前只有中英文混合模式，填写固定值zh
ie:编码方式
spd：语速，取值0-9，默认为5中语速
text：合成的文本，使用UTF-8编码。小于512个中文字或者英文数字。（文本在百度服务器内转换为GBK后，长度必须小于1024字节）

image.png

业务需求是：点击播放按钮的时候，朗读全片文章，但是由于文章过于长，就不能播报了（请求url过长），处理办法是分段传输：

1. 页面上写一个标签audio，提取文本

image.png image.png

2. 在data中声明变量

image.png

3. js部分

//提取后台返回的富文本标签中的文字部分
getSimpleText(html) {
        var re1 = new RegExp("<.+?>", "g");//匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
        var msg = html.replace(re1, '');//执行替换成空字符
        return msg;
      },
//阅读文章主要部分
voiceArticle(text) {
        let audio = document.getElementById('music1')
        audio.src = 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=4&per=4&text='+text
        console.log(audio,this.audioPause)
       if(audio!=null){
         if(this.audioPause){
           console.log('播放')
           this.audioPause = false
           if(text.length<500){
             audio.play()// 这个就是播放
             this.audioPause = false //切换播放按钮为两条竖线
             audio.addEventListener('ended', () => {
                 console.log('文章少于500字，所有文本播放完成')
                 this.audioPause = true
             }, false)
           }else{
             console.log('要阅读的文章字数超过五百字')
             //  拆分成多条
             const num = text.length / 500
             const subArticleArr = []//分段阅读，每三百字三百字读，读完第一段读第二段
             for (let i = 0; i < num; i++) {
               const subText = text.substr(0 + i * 500, 500)
               subArticleArr.push(subText)
             }
             audio.src = 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=4&per=4&text='+subArticleArr[this.fenIndex]
             audio.play()
             audio.addEventListener('ended', () => {
               console.log('第' + this.fenIndex + '段播放结束')
               this.fenIndex++ //下标+1 读下一段
               if (this.fenIndex <= subArticleArr.length) {
                 audio.src = 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=4&per=4&text=' + subArticleArr[this.fenIndex]
                 audio.play()// 这个就是播放
               } else {
                 console.log('所有文本播放完成')
                 this.audioPause = true
               }
             }, false)

           }
          /* audio.play()// 这个就是播放
           this.audioPause = false //切换播放按钮为两条竖线*/
         }else{
           console.log('暂停')
           audio.pause()// 这个就是暂停
           this.audioPause = true //切换播放按钮为两条竖线
         }
       }
      },