您好,登錄后才能下訂單哦!
真的腦子疼,小程序的音頻組件居然沒有進(jìn)度控制的功能,網(wǎng)上的方法又很少,邏輯通了就好寫了。
1.所有音頻播放、停止按鈕使用狀態(tài)切換控制
2.當(dāng)點(diǎn)擊某個(gè)音頻播放時(shí),首先將所有音頻的狀態(tài)置為停止?fàn)顟B(tài),然后將當(dāng)前音頻置為播放狀態(tài)
3.滾動(dòng)條插件配合音頻控件一起使用
4.播放狀態(tài)時(shí)滾動(dòng)條的長(zhǎng)度隨音頻進(jìn)度變化而變化,時(shí)間也要顯示
5.拖動(dòng)滾動(dòng)條時(shí),音頻的當(dāng)前時(shí)間隨滾動(dòng)條變化而變化
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) {//控制視頻播放,需求更改后暫時(shí)無用 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) {//控制課程音頻播放,需求更改后暫時(shí)無用 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) {//第一次點(diǎn)擊音頻 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({//記錄當(dāng)前點(diǎn)擊項(xiàng)和上次點(diǎn)擊項(xiàng) newid2: e.currentTarget.dataset.index, oldid2: that.data.newid2 ? that.data.newid2 : index }) } else {//非第一次點(diǎn)擊 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){//帶滾動(dòng)條多個(gè)音頻處理問題 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++){//將所有的音頻置為停止?fàn)顟B(tài) that.setAudioType(i,false,true) } that.setAudioType(index,true,false)//將當(dāng)前音頻置為播放狀態(tài) 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(); //音頻開始播放的時(shí)間 if (arr[index].currentProcessNum != 0){ that.data.audio.startTime = arr[index].currentProcessNum } //音頻自然播放結(jié)束 that.data.audio.onEnded(function name(params) { that.setCurrent(index, "00:00", 0) that.setAudioType(index,false,false) }) //音頻進(jìn)度播放更新 that.data.audio.onTimeUpdate(function () { //設(shè)置總時(shí)長(zhǎng) 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) } //沒有觸動(dòng)滑動(dòng)事件更新進(jìn)度 if(!arr[index].isMove){ that.setCurrent(index,that.time_to_sec(that.data.audio.currentTime), that.data.audio.currentTime) } }) }, //開始滑動(dòng)觸發(fā) start : function (e) { let arr = this.data.cc let index = e.currentTarget.dataset.index this.move(index,true) }, //觸發(fā)滑動(dòng)條 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) }, //結(jié)束滑動(dòng)觸發(fā) 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) }, //設(shè)置音頻圖片狀態(tài)以及滾動(dòng)條可播放狀態(tài)函數(shù) 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 }) }, //設(shè)置音頻當(dāng)前播放時(shí)間以及滾動(dòng)條當(dāng)前位置函數(shù) 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 }) }, //設(shè)置音頻總播放時(shí)間以及滾動(dòng)條總位置函數(shù) 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 }) }, //設(shè)置滾動(dòng)條是否滾動(dòng)狀態(tài)函數(shù) move:function (index,isMove) { let that = this let arrs = that.data.cc arrs[index].isMove = isMove that.setData({ cc: arrs }) }, //設(shè)置音頻時(shí)間點(diǎn)函數(shù) seek: function (index, seek) { let that = this let arrs = that.data.cc arrs[index].seek = seek that.setData({ cc: arrs }) },
總結(jié)
以上所述是小編給大家介紹的微信小程序多音頻播放進(jìn)度條問題,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。