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

 更新时间:2018年08月28日 11:16:35   作者:christalfuller  
小程序的音频组件居然没有进度控制的功能,需要我们自己实现,下面脚本之家小编给大家带来了微信小程序多音频播放进度条问题,感兴趣的朋友一起看看吧

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

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

总结

以上所述是小编给大家介绍的微信小程序多音频播放进度条问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 使用typescript类型来实现快排详情

    使用typescript类型来实现快排详情

    这篇文章主要介绍了使用typescript类型来实现快排详情,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • js获取腾讯视频ID的方法

    js获取腾讯视频ID的方法

    这篇文章主要介绍了js获取腾讯视频ID的方法,涉及JavaScript针对URL地址规则的分析与字符串的截取操作相关操作技巧,需要的朋友可以参考下
    2016-10-10
  • 使用dynatrace-ajax跟踪JavaScript的性能

    使用dynatrace-ajax跟踪JavaScript的性能

    DynaTrace 致力于分析后台应用性能的表现已经好几年了,最近,他们通过发布dynaTrace Ajax Edition进入了前端性能分析领域. 它是一个运行在IE下的BHO免费工具. 虽然我喜欢Firefox和它下面的所有插件,但我知道基于IE的测试和调试也是很重要的。
    2010-04-04
  • 基于JS实现移动端向左滑动出现删除按钮功能

    基于JS实现移动端向左滑动出现删除按钮功能

    最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,其实实现此功能很简单的。这篇文章主要介绍了基于js实现移动端向左滑动出现删除按钮,需要的朋友可以参考下
    2017-02-02
  • es6处理数组的方法汇总(非常详细)

    es6处理数组的方法汇总(非常详细)

    ES6中引入了一些新的数组方法,例如:Array.of(),Array.from()等,下面这篇文章主要给大家介绍了关于es6处理数组的方法汇总,需要的朋友可以参考下
    2023-06-06
  • js操作浏览器的参数方法

    js操作浏览器的参数方法

    下面小编就为大家带来一篇js操作浏览器的参数方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • JS动态改变浏览器标题的方法

    JS动态改变浏览器标题的方法

    这篇文章主要介绍了JS动态改变浏览器标题的方法,涉及JavaScript页面元素结合时间函数动态操作的相关技巧,需要的朋友可以参考下
    2016-04-04
  • myFocus slide3D v1.1.0 使用方法与下载

    myFocus slide3D v1.1.0 使用方法与下载

    myFocus slide3D v1.1.0 使用方法与下载,需要的朋友可以参考下。
    2011-01-01
  • JS如何获取浏览器声音、麦克风以及通知权限

    JS如何获取浏览器声音、麦克风以及通知权限

    在我们开发网页的时候偶尔会有需要用户录音的情况,下面这篇文章主要给大家介绍了关于JS如何获取浏览器声音、麦克风以及通知权限的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • 扩展JS Date对象时间格式化功能的小例子

    扩展JS Date对象时间格式化功能的小例子

    这篇文章主要介绍了扩展JS Date对象时间格式化功能,有需要的朋友可以参考一下
    2013-12-12

最新评论