微信小程序 —— 自定义带进度条的音频播放控件audio

来源：互联网发布：mac层随机竞争算法编辑：程序博客网时间：2024/06/06 13:17

在使用微信小程序的音频控件（audio）的时候发现居然控件中竟然没有播放进度条。

具体的完整代码已经放到了PockerUI里。

开源代码github地址：https://github.com/wushuxuan/PockerUI

码云库地址：https://gitee.com/wushuxuan/PockerUI

例如：

这里写图片描述

而微信小程序自带的音频空间（audio）光秃秃的:

这里写图片描述

所以我就想了个办法，做了一个动态的音频进度条，像这样音乐进行到百分之几，进度条走到百分之几：

这里写图片描述

-wxml<audio bindtimeupdate="MusicStart" bindended="MusicEnd" wx:for="{{MusicList}}" wx:key="{{item}}" author="{{item.author}}" controls poster="{{item.image}}" name="{{item.name}}" src='{{item.url}}'><view class="free-MusicProgress"> <view style="width:{{progress}}%;"></view></view></audio>

-wxssaudio{  position: relative;}audio .free-MusicProgress{  position: absolute;  width:78%;  left:21.7%;  bottom:1px;  background:#C3C3C3;}audio .free-MusicProgress>view{  background:#48c23d;  height:2px;}

-jsMusicStart:function(e){  var progress = parseInt((e.detail.currentTime / e.detail.duration) * 100)  var that = this  that.setData({   progress: progress  })  console.log('音乐播放进度为'+progress+'%')  },

阅读全文

0 0