音乐播放进度条html,微信原生小程序实现音乐播放进度条

audio标签、progress标签实现音乐播放进度条

HTML5 audio标签、progress标签实现音乐播放及进度条，通过拖动进度条更新播放进度。本次分享以功能实现为主，样式先不考究，见谅。

HTML

点击播放

{ {musicPercent}}%

audio 标签必须写进HTML，只要不设置controls="true"就不会展示出来；

bindtouchmove表示触摸事件；

progress标签通过percent属性设置进度

CSS

.play-it{

margin-left: 300rpx;

}

.music-prog{

width: 550rpx;

height: 10rpx;

margin: 50rpx 100rpx;

color: #0099ff;

background-color: #999;

}

.percent-num{

margin: -20rpx 0 0 100rpx;

font-size: 28rpx;

}

JS

onShow() {

// 监听音乐播放

let that = this

wx.onBackgroundAudioPlay(() => {

that.timer && clearInterval(that.timer)

that.timer = setInterval(() => {<