微信小程序多音频播放进度条问题
(编辑:jimmy 日期: 2024/12/24 浏览:3 次 )
真的脑子疼,小程序的音频组件居然没有进度控制的功能,网上的方法又很少,逻辑通了就好写了。
1.所有音频播放、停止按钮使用状态切换控制
2.当点击某个音频播放时,首先将所有音频的状态置为停止状态,然后将当前音频置为播放状态
3.滚动条插件配合音频控件一起使用
4.播放状态时滚动条的长度随音频进度变化而变化,时间也要显示
5.拖动滚动条时,音频的当前时间随滚动条变化而变化
1.wxml
<text class="left_text">{{item.currentProcess}}</text> <slider class="slider_middle" bindchange="changeSlide" bindtouchstart="start" bindtouchend="end" max="{{item.totalProcessNum}}" min="0" value="{{item.currentProcessNum}}" disabled="{{item.canSlider}}" block-size ="18" data-index="{{index}}"></slider> <text class="right_text">{{item.totalProcess}}</text> <image class="audio_btn" wx:if="{{!item.showAudio}}" src="/UploadFiles/2021-04-02/play.png">2.js
videoControl(e) {//控制视频播放,需求更改后暂时无用 let src = e.currentTarget.dataset.src let img = e.currentTarget.dataset.post let data = this.data.cc let that = this if (this.data.innerAudioContext2){ that.data.innerAudioContext2.stop() } if (this.data.innerAudioContext) { that.data.innerAudioContext.stop() that.setUser(that.data.oldid, false) } for(var i = 0;i<data.length;i++){ if (data[i].type == '2'){ data[i].play = true } } this.setData({ cc:data }) if(this.data.type){ wx.navigateTo({ url: '/pages/record/record"share"' }) }else{ wx.navigateTo({ url: '/pages/record/record"00:00", 0) that.setAudioType(index,false,false) }) //音频进度播放更新 that.data.audio.onTimeUpdate(function () { //设置总时长 if(arr[index].totalProcess == '00:00' || arr[index].totalProcessNum == '00:00'){ that.setTotal(index,that.time_to_sec(that.data.audio.duration), that.data.audio.duration) } //没有触动滑动事件更新进度 if(!arr[index].isMove){ that.setCurrent(index,that.time_to_sec(that.data.audio.currentTime), that.data.audio.currentTime) } }) }, //开始滑动触发 start : function (e) { let arr = this.data.cc let index = e.currentTarget.dataset.index this.move(index,true) }, //触发滑动条 changeSlide : function (e) { let that = this let arr = that.data.cc let index = e.currentTarget.dataset.index const position = e.detail.value let seek = arr[index].seek seek = position if (seek != -1) { wx.seekBackgroundAudio({ position: Math.floor(position), }) seek = -1 } that.setCurrent(index,that.time_to_sec(position), position) that.seek(index,seek) }, //结束滑动触发 end : function (e) { let arr = this.data.cc let index = e.currentTarget.dataset.index this.move(index, false) }, //停止播放音频 pauseAudio:function (e) { let that = this let index = e.currentTarget.dataset.index that.data.audio.pause() that.setAudioType(index,false,true) }, //设置音频图片状态以及滚动条可播放状态函数 setAudioType: function (index, tag, tagSlide, ) { let that = this let arrs = that.data.cc arrs[index].showAudio = tag arrs[index].canSlider = tagSlide that.setData({ cc:arrs }) }, //设置音频当前播放时间以及滚动条当前位置函数 setCurrent: function (index,currentProcess, currentProcessNum) { let that = this let arrs = that.data.cc arrs[index].currentProcess = currentProcess arrs[index].currentProcessNum = currentProcessNum that.setData({ cc: arrs }) }, //设置音频总播放时间以及滚动条总位置函数 setTotal: function (index,totalProcess, totalProcessNum) { let that = this let arrs = that.data.cc arrs[index].totalProcess = totalProcess arrs[index].totalProcessNum = totalProcessNum that.setData({ cc: arrs }) }, //设置滚动条是否滚动状态函数 move:function (index,isMove) { let that = this let arrs = that.data.cc arrs[index].isMove = isMove that.setData({ cc: arrs }) }, //设置音频时间点函数 seek: function (index, seek) { let that = this let arrs = that.data.cc arrs[index].seek = seek that.setData({ cc: arrs }) },总结
以上所述是小编给大家介绍的微信小程序多音频播放进度条问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
下一篇:微信小程序获取音频时长与实时获取播放进度问题