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

需求分析

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

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

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

2.按照顺序进行播放.

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

实现

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

websocketonmessage(e){ //数据接收  // console.log(e,'数据接收')if(e.data){// console.log(e.data)let data = JSON.parse(e.data).dataif(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.audiothis.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])}},

希望对你有帮助

vue项目中实现语音队列的依次播放相关推荐

vue项目中，amr格式的音频播放
在vue项目中,使用电脑浏览器播放amr格式的音频文件是直接播放不出来的,需要使用一个js包:benz-amr-recorder 1.npm install benz-amr-recorder 2.想 ...
Vue项目中使用海康安全生产平台播放监控视频
最近一直在做有关海康监控视频的项目,闲下来写下这篇文章,加深一下印象,同时也和大家交流一下经验,以便更好提升自己.废话不多说,开始正题.... 首先把海康插件引进到项目中来然后在index.html ...
保姆级教程：js前端接入科大讯飞语音评测，实现朗读打分，vue对接科大讯飞语音评测，还可以实现句子逐词分析对错以及打分，将demo接入vue项目中
需求说明:实现一个点击录制英文句子朗读,然后调用科大讯飞接口分析朗读准确度,并逐词分析朗读正确性. 步骤一.下载运行demo 首先附上科大讯飞语音评测流式版的文档链接:链接在此然后在文档里找到dem ...
vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
Vue项目中遇到了大文件分片上传的问题
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
vue项目中通过WebSocket实现实时消息提示及遇到的问题
vue项目中通过WebSocket实现实时消息提示(前端代码) 需求说明后台有新增消息通知,并实时推送给用户端,用websocket可以很方便的解决这个问题,但是websocket有个弊端不兼容IE ...
vue项目中使用flv.js实时播放断流重连关闭断流开发心得
第一次碰这个东西肯定会碰壁的,问百度人都问傻了(关键还骗人),其中心酸不必多描述,只为成长后来项目更新采用的是EasyPlayer插件文章地址: VUE项目中优雅使用EasyPlayer 后端是流 ...
vue项目中使用echarts完成图表类的开发之饼图，环形图
最近在vue项目中使用echarts.js完成诸如饼图,环形图,折线图,折线图加柱状图,和柱状图(水平柱状图和垂直柱状图),以及柱状图堆叠,下面请看图片展示: 如上图所示基本上echarts的简单图表 ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...

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

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

需求分析

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

2.按照顺序进行播放.

实现

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

2.按照顺序进行播放.

vue项目中实现语音队列的依次播放相关推荐

最新文章

热门文章