小程序怎么做音乐播放条

小程序怎么做音乐播放条

可以使用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（）设置播放进度

效果：

PHP中文网，大量网站建设教程，欢迎学习！

以上就是小程序怎么做音乐播放条的详细内容，更多内容请关注技术你好其它相关文章！