微信小程式 —— 自定義帶進度條的音訊播放控制元件audio
阿新 • • 發佈:2019-02-02
在使用微信小程式的音訊控制元件(audio)的時候發現居然控制元件中竟然沒有播放進度條。
具體的完整程式碼已經放到了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>
-wxss
audio{
position: relative;
}
audio .free-MusicProgress{
position: absolute;
width:78%;
left :21.7%;
bottom:1px;
background:#C3C3C3;
}
audio .free-MusicProgress>view{
background:#48c23d;
height:2px;
}
-js
MusicStart:function(e){
var progress = parseInt((e.detail.currentTime / e.detail.duration) * 100)
var that = this
that.setData({
progress: progress
})
console.log('音樂播放進度為' +progress+'%')
},