亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

首頁 > 課堂 > 小程序 > 正文

微信小程序多音頻播放進度條問題

2020-03-21 16:11:34
字體:
來源:轉載
供稿:網友

真的腦子疼,小程序的音頻組件居然沒有進度控制的功能,網上的方法又很少,邏輯通了就好寫了。

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  }) },

總結

以上所述是小編給大家介紹的微信小程序多音頻播放進度條問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持!


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
国产欧美日韩高清| 亚洲丝袜一区在线| 成人性生交大片免费看小说| 欧美日韩在线观看视频小说| 国产精品女人久久久久久| 一区二区欧美久久| 欧美精品免费在线观看| 97avcom| 欧美精品制服第一页| 久久久久久久激情视频| 福利一区视频在线观看| 国产精品av在线播放| 欧美精品videos另类日本| 欧美精品18videos性欧| 亚洲欧洲在线免费| 欧美一级电影免费在线观看| 日日狠狠久久偷偷四色综合免费| 国产精品成人aaaaa网站| 欧美多人爱爱视频网站| 国产成人精品久久久| 国产精品久久久久一区二区| 有码中文亚洲精品| 在线观看日韩av| 九九久久精品一区| 国产精品成人av性教育| 亚洲电影免费观看高清完整版在线观看| 欧美性极品xxxx做受| 一本一本久久a久久精品牛牛影视| 亚洲精品在线看| 亚洲欧美国产精品久久久久久久| 中文字幕在线视频日韩| 国产亚洲视频在线| 欧美中文在线观看| 亚洲欧洲在线看| 久久久久久国产精品三级玉女聊斋| 深夜福利亚洲导航| 国产一区二中文字幕在线看| 亚洲网在线观看| 欧美日韩国产专区| 欧美性猛交xxxx乱大交| 影音先锋欧美精品| 久久视频国产精品免费视频在线| 午夜精品一区二区三区在线播放| 久久精品中文字幕电影| 色婷婷av一区二区三区在线观看| 欧美性猛交xxxx富婆| 欧美人与物videos| 国产精品视频yy9099| 在线精品国产欧美| 久久久久久香蕉网| 欧美巨乳美女视频| 精品国产31久久久久久| 欧美成人免费全部观看天天性色| 日韩乱码在线视频| 精品亚洲va在线va天堂资源站| 国产精品ⅴa在线观看h| 亚洲男人7777| 亚洲福利视频专区| www.xxxx欧美| 日韩在线观看免费全集电视剧网站| 91在线播放国产| 国产精品永久免费| 亚洲人成人99网站| 国产免费一区二区三区在线能观看| 91亚洲精华国产精华| 欧美成人精品不卡视频在线观看| 国产在线拍偷自揄拍精品| 一本色道久久综合狠狠躁篇怎么玩| 成人午夜黄色影院| 国产成人在线播放| 成人黄色影片在线| 欧美日本亚洲视频| 久久理论片午夜琪琪电影网| 国产91精品黑色丝袜高跟鞋| 亚洲一区二区久久久久久久| 国产一区二区在线免费视频| 午夜精品99久久免费| 国产成人久久久精品一区| 91超碰caoporn97人人| 欧美精品一本久久男人的天堂| 亚洲免费一在线| 日韩专区中文字幕| 国产女精品视频网站免费| 91国偷自产一区二区三区的观看方式| 欧美国产日韩xxxxx| 久久精品99国产精品酒店日本| 亚洲偷熟乱区亚洲香蕉av| 国产精品久久久久久久app| 色久欧美在线视频观看| 午夜精品一区二区三区在线| www.日韩不卡电影av| 91精品久久久久久久久久久久久| 91在线免费观看网站| 亚洲人成网站免费播放| 精品中文字幕在线| 国产成人一区三区| 色噜噜狠狠色综合网图区| 日韩国产高清污视频在线观看| 日韩高清中文字幕| 九九精品视频在线| 成人性生交大片免费看小说| 91高清免费视频| 亚洲春色另类小说| 高清欧美性猛交xxxx黑人猛交| 久久久久久高潮国产精品视| 高清亚洲成在人网站天堂| 日韩欧美一区二区三区久久| 一本色道久久88综合日韩精品| 欧美日韩加勒比精品一区| 亚洲女同性videos| 人人澡人人澡人人看欧美| 日韩电影免费观看在线观看| 亚洲人成网7777777国产| 亚洲va男人天堂| 日本欧美国产在线| 午夜精品久久久久久久白皮肤| 久久久精品久久久| 伊人青青综合网站| 成人午夜高潮视频| 国产999精品久久久| 亚洲午夜激情免费视频| 91久久精品日日躁夜夜躁国产| 国a精品视频大全| 国产精品一二三在线| 国产精品视频一区国模私拍| 欧美日在线观看| 国产精品视频在线观看| 久久99久久亚洲国产| 亚洲精品大尺度| 亚洲欧洲一区二区三区在线观看| 高清一区二区三区四区五区| 伊人男人综合视频网| 精品国产一区二区在线| 国产精品免费小视频| 亚洲社区在线观看| 亚洲字幕一区二区| 日韩av在线精品| 亚洲风情亚aⅴ在线发布| 欧美高清视频一区二区| 日韩欧美在线中文字幕| 欧美日韩美女在线观看| 久久躁日日躁aaaaxxxx| 亚洲视频电影图片偷拍一区| 亚洲片国产一区一级在线观看| 亚洲一区美女视频在线观看免费| 亚洲xxxx3d| 欧美性xxxx极品hd满灌| 午夜免费在线观看精品视频| 国产精品欧美亚洲777777| 日韩三级成人av网| 国产欧美最新羞羞视频在线观看| 亚洲 日韩 国产第一| 国内精品美女av在线播放| 亚洲黄在线观看| 日韩在线精品视频| 日韩一区在线视频| 久热爱精品视频线路一| 亚洲一区999| 日韩美女中文字幕| 激情亚洲一区二区三区四区| 国产欧美一区二区三区久久人妖| 日韩免费av片在线观看| 成人在线国产精品| 韩剧1988在线观看免费完整版|