小程序怎么做音乐播放条
可以使用progress组件实现音乐播放条，具体做法如下：
1、添加一个audio标签，不指定controls=true属性即可隐藏。
<view class="audio-play"> <audio src=""></audio> </view> <view> <view class="one-column play-it" bindtap="playmusic"> <view>点击播放</view> </view> <progress class="music-prog" bindtouchmove="settouchmove" percent="{{musicpercent}}"></progress> <view class="percent-num">{{musicpercent}}%</view> </view>
bindtouchmove表示触摸事件；
progress标签通过percent属性设置进度
2、编写wss文件
推荐学习：小程序开发
.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;}
3、编写js，控制播放条。
onshow() { // 监听音乐播放 let that = this wx.onbackgroundaudioplay(() => { that.timer && clearinterval(that.timer) that.timer = setinterval(() => { wx.getbackgroundaudioplayerstate({ success: res => { let per = (res.currentposition/res.duration)*10000 that.setdata({ musicpercent: math.round(per)/100 + '', duration: res.duration }) } }) }, 1000) }) // 监听背景音频暂停事件 wx.onbackgroundaudiopause(() => { clearinterval(that.timer) }) // 监听背景音频停止事件 wx.onbackgroundaudiostop(() => { clearinterval(that.timer) }) }, playmusic() { let obj = { dataurl: 'http://p6jceeddp.bkt.clouddn.com/%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) { if(e.touches[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: math.round(percent)/100 + '' }) this.data.current = (this.data.musicpercent/100)*this.data.duration } } }, setprogress() { let that = this console.log('bindtouchend') wx.getbackgroundaudioplayerstate({ 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定义触摸事件
获取到的横向进度条位置，计算用户所拖拽到的进度条位置
**注意：在此处调用wx.seekbackgroundaudio（）设置播放进度，会导致音频出现卡顿的效果。因为用户拖动的过程中会多次调用seek方法，所以应该把设置播放进度放在拖动进度条完成之后再执行。
touchend监听触摸事件的停止
根据触摸事件中计算得到的时间current，调用wx.seekbackgroundaudio（）设置播放进度
效果：
，大量网站建设教程，欢迎学习！
以上就是小程序怎么做音乐播放条的详细内容。