How to create a music playback bar in a small program

How to make a music playback bar in a small program

You can use the progress component to implement a music playback bar. The specific method is as follows:

1. Add an audio tag and hide it without specifying the controls="true" attribute.

 <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 represents a touch event;

The progress tag sets the progress through the percent attribute

2. Write WSS files

Recommended learning ：小program development

.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. Write js to control the playback bar.

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 + &#39;&#39;
        })
        this.data.current = (this.data.musicPercent/100)*this.data.duration
      }
    }
  },
  
  setProgress() {
    let that = this
    console.log(&#39;bindtouchend&#39;)
    wx.getBackgroundAudioPlayerState({
      success: res => {
        that.data.current !== res.currentPosition &&
        wx.seekBackgroundAudio({
          position: that.data.current,
          success () {
            console.log(&#39;seek&#39;, that.data.current)
          }
        })
      }
    })
  }

The effective area of ​​the playback bar

Horizontal: e.touches[0].clientX

Vertical: e.touches[0].clientY

The horizontal range here is 55~355 and the vertical range is 390~410

Define the touch event

The obtained horizontal progress bar position , calculate the position of the progress bar dragged by the user

**Note: Calling wx.seekBackgroundAudio() here to set the playback progress will cause the audio to freeze. Because the seek method will be called multiple times during the dragging process, the playback progress setting should be executed after the dragging progress bar is completed.

touchend monitors the stop of touch events

Calculate wx.seekBackgroundAudio() to set the playback progress based on the time current calculated in the touch event

Effect :

PHP Chinese website, a large number of website construction tutorials, welcome to learn!

The above is the detailed content of How to create a music playback bar in a small program. For more information, please follow other related articles on the PHP Chinese website!