真的脑子疼,小程序的音频组件居然没有进度控制的功能,网上的方法又很少,逻辑通了就好写了。
成都创新互联主要从事成都网站设计、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务临淄,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
1.所有音频播放、停止按钮使用状态切换控制
2.当点击某个音频播放时,首先将所有音频的状态置为停止状态,然后将当前音频置为播放状态
3.滚动条插件配合音频控件一起使用
4.播放状态时滚动条的长度随音频进度变化而变化,时间也要显示
5.拖动滚动条时,音频的当前时间随滚动条变化而变化
1.wxml
{{item.currentProcess}} {{item.totalProcess}}
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{ }) that.data.innerAudioContext2.onStop(() => { }) that.setData({//记录当前点击项和上次点击项 newid2: e.currentTarget.dataset.index, oldid2: that.data.newid2 ? that.data.newid2 : index }) } else {//非第一次点击 let old = that.data.newid2 that.setData({ newid2: index, oldid2: old }) if (that.data.oldid2 != index ) { that.data.innerAudioContext2.stop() that.data.innerAudioContext2.src = e.currentTarget.dataset.srcs that.data.innerAudioContext2.play() }else{ if (that.data.innerAudioContext2.paused){ that.data.innerAudioContext2.stop() that.data.innerAudioContext2.src = e.currentTarget.dataset.srcs that.data.innerAudioContext2.play() }else{ that.data.innerAudioContext2.stop() for (var i = 0; i < data.length; i++) { data[i].play = true } } } } this.setData({ cc: data }) }, playAudio(e){//带滚动条多个音频处理问题 let that = this let arr = that.data.cc let index = e.currentTarget.dataset.index if (that.data.audio) {//将所有的音频停止 that.data.audio.pause() } for(let i=0;i
总结
以上所述是小编给大家介绍的微信小程序多音频播放进度条问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!