微信小程序进度条样式_微信小程序自定义音乐进度条的实例代码

需求：显示音乐播放按钮、可手动拖拽进度条；页面中含多个音乐，播放当前音乐时暂停其他音乐播放。

小程序自带标签 audio

小程序自带的audio标签含固定的样式，且有最小尺寸。目前项目也不含name和author字段，所以放弃audio标签。

实现效果图

初始化音乐数据

{ {currentProcess}}

{ {totalProcess}}

src: _this.data.questionObj.audio,

currentProcess: '--:--',//显示 将currentProcessNum处理成时间形式展示

currentProcessNum: 0,//赋值

totalProcess: '--:--',

totalProcessNum: 1,

seek: -1,

imgUrl: '../../images/play.png',

canSlider: false //是否可以滑动，防止加载音乐时 用户滑动进度条

点击播放按钮触发事件

说明：

•因页面中音乐数量较多，所以只有当用户点击播放，再去加载audio文件。

•wx.getBackgroundAudioManager()对象，同一时间只会播放一个audio文件。当重新赋值src时，会切换文件。

•利用onTimeUpdate方法实时更新播放进度。

•onEnded方法处理audio播放完毕后的数据重新初始化事件。

•变量clickPlayA