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


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 相关文章推荐
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
javascript dom 操作详解 js加强
Jul 13 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
微信小程序获取音频时长与实时获取播放进度问题
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
php 无限极分类
2008/03/27 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
Python中endswith()函数的基本使用
2015/04/07 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python银行系统实战源码
2019/10/25 Python
Pycharm小白级简单使用教程
2020/01/08 Python
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
婚庆公司的创业计划书
2014/01/22 职场文书
七匹狼男装广告词
2014/03/21 职场文书
个人向公司借款协议书
2014/10/09 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
迟到检讨书范文
2015/01/27 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang