微信小程序多音频播放进度条问题


Posted in Javascript onAugust 28, 2018

真的脑子疼,小程序的音频组件居然没有进度控制的功能,网上的方法又很少,逻辑通了就好写了。

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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
JScript的条件编译
May 29 Javascript
Javascript进制转换实例分析
May 14 Javascript
JS控制表单提交的方法
Jul 09 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 #Javascript
vue表单自定义校验规则介绍
Aug 28 #Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 #Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 #Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 #Javascript
浅谈redux以及react-redux简单实现
Aug 28 #Javascript
Vue封装的可编辑表格插件方法
Aug 28 #Javascript
You might like
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
Position属性之relative用法
2015/12/14 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python适合人工智能的理由和优势
2019/06/28 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
好的演讲稿开场白
2013/12/30 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
社会学专业求职信
2014/02/24 职场文书
关于环保的建议书400字
2014/03/12 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
专题组织生活会方案
2014/06/15 职场文书
工作失职检讨书
2015/01/26 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis