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

真的脑子疼，小程序的音频组件居然没有进度控制的功能，网上的方法又很少，逻辑通了就好写了。
1.所有音频播放、停止按钮使用状态切换控制
2.当点击某个音频播放时，首先将所有音频的状态置为停止状态，然后将当前音频置为播放状态
3.滚动条插件配合音频控件一起使用
4.播放状态时滚动条的长度随音频进度变化而变化，时间也要显示
5.拖动滚动条时，音频的当前时间随滚动条变化而变化
6.

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.srclet img = e.currentTarget.dataset.postlet data = this.data.cclet that = thisif (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.indexlet that = thislet data = this.data.ccif (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.srcsthat.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.newid2that.setData({newid2: index,oldid2: old})if (that.data.oldid2 != index ) {that.data.innerAudioContext2.stop()that.data.innerAudioContext2.src = e.currentTarget.dataset.srcsthat.data.innerAudioContext2.play()}else{if (that.data.innerAudioContext2.paused){that.data.innerAudioContext2.stop()that.data.innerAudioContext2.src = e.currentTarget.dataset.srcsthat.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 = thislet arr = that.data.cclet index = e.currentTarget.dataset.indexif (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.srcthat.data.audio.title = '泰格英语'that.data.audio.epname = '泰格英语'that.data.audio.autoplay = truethat.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.cclet index = e.currentTarget.dataset.indexthis.move(index,true)},//触发滑动条changeSlide : function (e) {let that = thislet arr = that.data.cclet index = e.currentTarget.dataset.indexconst position = e.detail.valuelet seek = arr[index].seekseek = positionif (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.cclet index = e.currentTarget.dataset.indexthis.move(index, false)},//停止播放音频pauseAudio:function (e) {let that = thislet index = e.currentTarget.dataset.indexthat.data.audio.pause()that.setAudioType(index,false,true)},//设置音频图片状态以及滚动条可播放状态函数setAudioType: function (index, tag, tagSlide, ) {let that = thislet arrs = that.data.ccarrs[index].showAudio = tagarrs[index].canSlider = tagSlidethat.setData({cc:arrs})},//设置音频当前播放时间以及滚动条当前位置函数setCurrent: function (index,currentProcess, currentProcessNum) {let that = thislet arrs = that.data.ccarrs[index].currentProcess = currentProcessarrs[index].currentProcessNum = currentProcessNumthat.setData({cc: arrs})},//设置音频总播放时间以及滚动条总位置函数setTotal: function (index,totalProcess, totalProcessNum) {let that = thislet arrs = that.data.ccarrs[index].totalProcess = totalProcessarrs[index].totalProcessNum = totalProcessNumthat.setData({cc: arrs})},//设置滚动条是否滚动状态函数move:function (index,isMove) {let that = thislet arrs = that.data.ccarrs[index].isMove = isMovethat.setData({cc: arrs})},//设置音频时间点函数seek: function (index, seek) {let that = thislet arrs = that.data.ccarrs[index].seek = seekthat.setData({cc: arrs})},

小程序多音频播放进度条问题相关推荐

微信小程序动画之圆形进度条
微信小程序动画之圆形进度条上图: 代码: js: //获取应用实例 var app = getApp()var interval; var varName; var ctx = wx.createC ...
基于canvas 2D实现微信小程序自定义组件-环形进度条
基于canvas 2D实现微信小程序自定义组件-环形进度条最近开发一个小程序项目博闻金榜答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个 ...
微信小程序 - 音频播放进度条和点击拖动的控制，支持自定义音乐播放控件样式布局（wx.createAudioContext）解决各种 InnerAudioContext.onTimeUpdate不执行
前言网上有很多关于 InnerAudioContext.onTimeUpdate 不执行.失效的问题,都导致播放进度条无法做了,本文完美解决. 本文实现了自定义播放音频控件样式,且支持播放进度条显 ...
微信小程序全局音频播放，实现分析
1. 需求分析育儿柚道小程序中有针对育儿教育提供的音频课程,主要包含读书.读文的音频内容. 1.1 功能需求课程音频:包含课程音频的地方有三处课程卡片,包含在 scrollview 中的试听内容 ...
微信小程序：音频播放器
由于产品需求,需要做一个自定义音频播放器,现在也差不多做完了,接下来呢,给大家分享一下,大家先来看看效果图哦~ 这里呢,我选择的是 wx.createInnerAudioContext 这个方法,大家 ...
微信小程序录音+音频播放（解决ios无法音频播放问题）
微信小程序录音+播放 1.创建全局变量 const audioManager = wx.getRecorderManager(): const innerAudioContext = wx.creat ...
微信小程序实现音频播放，带有点击上一首和下一首的功能
1.注册音频的Api const innerAudioContext = wx.createInnerAudioContext(); 2.需要用到数据 exhibitList: [], //资源列表a ...
微信小程序实时获取播放进度（秒）
微信小程序视频播放使用插件请查看官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/video.html <vide ...
微信小程序html5音频,微信小程序 audio音频播放详解及实例
loop:是否循环播放 id:标注唯一组件以this.audioCtx = wx.createAudioContext('myAudio')获取控制组件的对象. bindplay:播放时触发该事件 b ...
微信小程序自定义封装环形进度条组件
我们先看效果-选不了视频没办法了说明:此组件对圆的宽度,进度条的宽度.颜色.旋转方向,还有进度条的值,还有两端是否要圆角都进行了动态化,无坑可放心用,参数解释在注释里,我就不写了 .效果图看到尾部的 ...

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

小程序多音频播放进度条问题相关推荐

最新文章

热门文章