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

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])
      }
    },

希望对你有帮助

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值