微信小程序的音乐播放器进度条
时间: 2023-06-30 08:03:38 浏览: 1038
微信小程序自定义音乐进度条的实例代码
5星 · 资源好评率100%
微信小程序的音乐播放器进度条可以通过 `<slider>` 标签来实现。具体步骤如下:
1. 在 WXML 文件中添加 `<slider>` 标签,设置 `value` 属性为当前播放时间,`max` 属性为歌曲总时长。
```html
<slider value="{{currentTime}}" max="{{duration}}" bindchange="changeProgress"></slider>
```
2. 在 JS 文件中定义当前播放时间和歌曲总时长,并在 `onTimeUpdate` 事件中更新 `currentTime` 变量的值。
```javascript
Page({
data: {
currentTime: 0,
duration: 0
},
onTimeUpdate: function (e) {
this.setData({
currentTime: e.detail.currentTime,
duration: e.detail.duration
})
},
changeProgress: function (e) {
wx.seekBackgroundAudio({
position: e.detail.value
})
}
})
```
3. 在 `changeProgress` 方法中调用 `wx.seekBackgroundAudio` 方法来改变歌曲的播放进度。
以上就是微信小程序的音乐播放器进度条的实现方法。
阅读全文