vue项目中实现语音队列的依次播放

需求分析

通过长链接接收后台返回的消息数据,并进行语音的依次播放完整.长链接和语音播放功能在以往的文章中都有介绍.这次我们主要着重介绍语音依次播放的功能.
那怎样实现依次播放呢?

1.需要用一个数组存储接收到的数据对象.

存储到数组中就不多说了,push进去就可以.

2.按照顺序进行播放.

消息队列有了,初始想法是使用一个定时器,每隔几秒播报消息队列中的消息,这样需要统计每条消息语音的时间来设置一个最长时间进行轮巡,如果语音播报时间相同这样好设置,如果是不同的话,设置的轮巡时间,可能不能完整的播报(或者按照最长的语音播报时间设置循环器).
这里我们通过添加监听播放结束事件来实现,在播放结束的时候如果消息队列中还存在要播放的消息,则继续播放.

实现

1.接受数据并存储到数组notificationArr中

websocketonmessage(e){ //数据接收  
      // console.log(e,'数据接收')
      if(e.data){
        // console.log(e.data)
        let data = JSON.parse(e.data).data
        if(data){
         this.setNotificationArr(data)
        }
      }
    }, 

//消息队列处理逻辑
    setNotificationArr(data){
      //符合权限的消息添加到消息队列中(需求要求:实现消息的依次播放,可设置播放次数,单独播放按次数来,消息队列中存在多条,每条最少播放一次,最后一条播放3次)
      this.notificationArr.push(data)
      //播放的队列中有一条消息(消息队列从空值到有第一条消息时调用显示消息弹框和声音的方法,
      //如果消息队列已经超过一条,这时语音提示正在进行不做任何操作,因为语音播放完成后在回调中会依次显示播放消息队列)
      if(this.notificationArr.length==1){
        //显示消息弹框和声音
        this.showNotification(this.notificationArr[0])
      }
    }

2.按照顺序进行播放.

添加监听播放结束事件

mounted(){
    //首次进入页面时
    this.audioPlay = this.$refs.audio
    this.audioPlay.addEventListener('ended',this.limitPlay)
  },

监听事件

//循环播放次数判断
    limitPlay(){
      //消息队列中第一条消息播放完成后,判断消息队列总有几条
      if(this.notificationArr.length==1){
        //只有一条时按照设置的次数进行播报,当播报完成后删除消息队列中的数据
        this.start++;
        // console.log("次数限制"+this.start)
        if(this.start <= this.playTimes-1){
        //语音播放方法
          this.playTip()
        }else{
          //当播报次数完成后,停止播报并且删掉消息队列中的数据
          this.audioPlay.pause()
          this.notificationArr.shift()
        }
      }else{
        //有多数据时,第一条播放完删掉第一条消息数据后,直接显示播放下一条消息
        this.notificationArr.shift()
        this.showNotification(this.notificationArr[0])
      }
    },

希望对你有帮助