在使用微信小程式的音訊控制元件（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+'%')
  },