中国旅游地,南阳王朱灿,一改双优心得体会
真的脑子疼，小程序的音频组件居然没有进度控制的功能，网上的方法又很少，逻辑通了就好写了。
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="../assets/play.png" data-src="{{item.src}}" bindtap="playaudio" data-index = "{{index}}"></image>
<image class="audio_btn" wx:else src="../assets/pause.png" bindtap="pauseaudio" data-index = "{{index}}"></image>
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?cid=' + this.data.cid + '&src=' + src + '&img=' + img + '&type="share"'
})
}else{
wx.navigateto({
url: '/pages/record/record?cid=' + this.data.cid + '&src=' + src + '&img=' + img
})
}
},
audiocontrol(e) {//控制课程音频播放，需求更改后暂时无用
let index = e.currenttarget.dataset.index
let that = this
let data = this.data.cc
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' && i != index) {
data[i].play = true
} else if (data[i].type == '2') {
data[i].play = false
} if (data[i].type == '3') {
data[i].play = true
}
}
if (!that.data.inneraudiocontext2) {//第一次点击音频
that.data.inneraudiocontext2 = wx.createinneraudiocontext();
that.data.inneraudiocontext2.src = e.currenttarget.dataset.srcs
that.data.inneraudiocontext2.play()
that.data.inneraudiocontext2.onplay(()=>{
})
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<arr.length;i++){//将所有的音频置为停止状态
that.setaudiotype(i,false,true)
}
that.setaudiotype(index,true,false)//将当前音频置为播放状态
that.data.audio = wx.getbackgroundaudiomanager();//初始化音频并播放
that.data.audio.src = e.currenttarget.dataset.src
that.data.audio.title = '泰格英语'
that.data.audio.epname = '泰格英语'
that.data.audio.autoplay = true
that.data.audio.play();
//音频开始播放的时间
if (arr[index].currentprocessnum != 0){
that.data.audio.starttime = arr[index].currentprocessnum
}
//音频自然播放结束
that.data.audio.onended(function name(params) {
that.setcurrent(index, "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
})
},
总结
以上所述是小编给大家介绍的微信小程序多音频播放进度条问题，希望对大家有所帮助
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
利用JavaScript更改input中radio和checkbox样式
网友评论