⾳乐播放进度条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
that.timer && clearInterval(that.timer)
that.timer = setInterval(() => {
success: res => {
let per = (res.currentPosition/res.duration)*10000
that.setData({
musicPercent: und(per)/100 + '',
duration: res.duration
})
}
})
}, 1000)
})
// 监听背景⾳频暂停事件
clearInterval(that.timer)
})
// 监听背景⾳频停⽌事件
clearInterval(that.timer)
})
},
playMusic() {
let obj = {
dataUrl: 'p6jceeddp.bkt.clouddn/%E5%B0%A4%E9%95%BF%E9%9D%96%20-%20%E6%98%A8%E6%97%A5%E9%9D%92%E7%A9%BA.mp3',
title: '昨⽇青空',
coverImgUrl: '/static/images/avatar.png'
}
wx.playBackgroundAudio(obj)
},
setTouchMove (e) {
uches[0].clientY >= 390 && e.touches[0].clientY <= 410) {
if (e.touches[0].clientX >= 55 && e.touches[0].clientX <= 355) {
let percent = (e.touches[0].clientX - 55)/300*10000
this.setData({
musicPercent: und(percent)/100 + ''
})
this.data.current = (this.data.musicPercent/100)*this.data.duration
}
}
},
setProgress() {
let that = this
console.log('bindtouchend')
success: res => {
that.data.current !== res.currentPosition &&
wx.seekBackgroundAudio({
position: that.data.current,
success () {
console.log('seek', that.data.current)
}
})
}
})
}
确定进度条的有效区域
横向: e.touches[0].clientX
纵向: e.touches[0].clientY
此处横向为 55~355 ，纵向为 390~410
定义触摸事件
html播放音乐代码
获取到的横向进度条位置，计算⽤户所拖拽到的进度条位置
**注意：在此处调⽤wx.seekBackgroundAudio()设置播放进度，会导致⾳频出现卡顿的效果。因为⽤户拖动的过程中会多次调⽤seek⽅法，所以应该把设置播放进度放在拖动进度条完成之后再执⾏。
touchend监听触摸事件的停⽌
根据触摸事件中计算得到的时间current，调⽤wx.seekBackgroundAudio()设置播放进度

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。