vue 实现百度语音合成播放

文章：

官网
百度语音合成浏览器跨域访问示例
vue 实现百度语音合成

看完以上三篇基本demo可以成功

场景：项目有问题的时候，预警弹框弹出，音频开始播报问题。可能第一条未读完，第二条预警弹框也出来了，这个时候要保证两条音频有序播放。
问题：百度语音合成,浏览器默认拒绝自动播放音频，需要自动播放的话得手动设置
注意：还需要一个token

1.下载

npm install baidu-aip-sdk

2.vue文件

<template>
  <div>
    百度语音,浏览器默认拒绝自动播放音频，需要的话得手动设置
  </div>
</template>
<script>
export default {
  data(){
    return{
      list:[],//保存音频
    }
  },
  mounted(){
    this.btts('银河航天')
    setTimeout(()=>{
      this.btts('你最最最最最好看')
    },1000)
    setTimeout(()=>{
      this.btts('哈哈哈哈')
    },1200)

    // 以上三次模拟预警弹框，弹框一出开始播放，第二条语音在第一条音频播完紧跟上。

    // 计时器保证三条音频可以紧跟上
    this.playTime = setInterval(()=>{
      this.play()
    },1000)
  },
  destroyed(){
    clearInterval(this.playTime)
  },
  methods:{
    play(){
      // console.log(this.list,'1222222222222')
      if(this.list.length){
        // 播放
        var audio = new Audio();
        audio.setAttribute('src', this.list[0].src);
        audio.play();
        audio=null;

        // 及时清除计时器，避免重叠
        clearInterval(this.playTime)

        // 在第一条音频播放时间后重新开启计时器
        this.playTime = setInterval(()=>{
          this.play()
        },this.list[0].size)

        // 及时删除数组0
        this.list.splice(0,1)
      }
    },
    btts(text) {
      console.log(text,'文本');
　　  //以下参数参考api文档，token和人的声音音色之类的参数
      var param={
            tex: text,//合成的文本
            tok: '24.XXXXXXXXXXXX',//这个token要换成自己的
            spd: 5,//默认为5中语速
            pit: 5,//5中语调
            vol: 15,//音量，取值0-15，默认为5中音量
            per: 4,//基础音库
            ctp:1,//web
            lan:'zh'//中文
        };
      var url = 'http://tsn.baidu.com/text2audio';
      var p = param || {};
      var that = this;
      var xhr = new XMLHttpRequest();
      xhr.open('POST', url);

　　　　// 创建form参数
    　　 var data = {};
　　　　 for (var p in param) {
          data[p] = param[p]
      }
 　　　　// 赋值预定义参数
　　　　 data.cuid = data.cuid || data.tok;
      // data.ctp = 1;
      // data.lan = data.lan || 'zh';
　　　 //以上为封装请求的参数


　　　　 // 序列化参数列表
　　　 var fd = [];
      for(var k in data) {
          fd.push(k + '=' + encodeURIComponent(data[k]));
      }

      var frd = new FileReader();
      xhr.responseType = 'blob';
      xhr.send(fd.join('&'));

　　　 //请求返回结果处理
      xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
              if (xhr.status == 200) {
                  if (xhr.response.type == 'audio/mp3') {
　　　　　　　　　　　　//  保存数据
                      that.list.push({
                        src:URL.createObjectURL(xhr.response),
                        size:xhr.response.size
                      })
                  }else{
　　　　　　　　　　　　//这里如果百度语音合成的接口返回类型不是audio/mp3，是json的话，代表你的参数有问题，返回结果失败，具体可以查看api文档
                alert("调用语音合成接口token已失效!");
                }
              }else{
                alert("语音合成接口调用失败!");
              }
          }
      }
    }
  }
}
</script>
<style scoped>

</style>