音乐播放功能的制作

最终实现的功能：

可以控制当前页音乐的播放和暂停，可以记录当前页的播放状态，如果再次进入时音乐上次的播放没停止可以继续播放。

用到的方法

• wx.playBackgroundAudio 播放背景音频
• wx.pauseBackgroundAudio 暂停背景音频的播放
• wx.onBackgroundAudioPlay 监听背景音频的播放
• wx.onBackgroundAudioPause 监听背景音频的暂停播放

步骤：

• 点击按钮，播放背景音乐，并且切换背景

detail.wxml: 根据isPlay的状态切换音乐的背景和logo的播放

<image class="main-image" src="{{isPlay ? activeObj.music.coverImgUrl : activeObj.detail_img}}"></image>
  <image catchtap="handlePlay" class="music-icon" src="{{isPlay ? '/images/music/music-stop.png' : '/images/music/music-start.png'}}"></image>

//isPlay 设置背景的切换，和播放logo的切换
//detail.js
handlePlay(){
    let isPlay = !this.data.isPlay;
    this.setData({
      isPlay
    })
    const { dataUrl, title } = this.data.activeObj.music;    
    if(isPlay){//进行音乐播放
      wx.playBackgroundAudio({
        dataUrl: dataUrl,
      })
    }

• onLoad中监听音乐的播放和暂停

detail.js:

wx.onBackgroundAudioPlay(() => {
        console.log('播放 success')
      this.setData({
        isPlay: true
      })
    })
    //监听音乐暂停状态
    wx.onBackgroundAudioPause(() => {
          console.log('播放暂停')
          this.setData({
            isPlay: false
          })
      });

• 设置app.js中的数据，通过播放暂停时设置 data: {pageIndex: null, isPlay: false} 记录当前页的播放状态

App({
  //注册小程序
  data: {
    //记录正在播放的页
    pageIndex: null,
    playFlag: false
  }
})

wx.onBackgroundAudioPlay(() => {
        console.log('播放 success')
      this.setData({
        isPlay: true
      })
        musicData.data.pageIndex = index;
        musicData.data.playFlag = true; 
        console.log(musicData);
    })
  
    //监听音乐暂停状态
    wx.onBackgroundAudioPause(() => {
          console.log('播放暂停')
          this.setData({
            isPlay: false
          })
          musicData.data.playFlag = false;
          console.log(musicData.data.playFlag)
      });

• 在页面刚进入时根据app.js中记录的当前页的状态设置播放和暂停

//设置初始化显示播放对应的状态
//如果是当前页且退出时是播放状态，切换isPlay为true
    if (musicData.data.pageIndex == index && musicData.data.playFlag == true) {
      this.setData({
        isPlay: true
      })
    }else{
      //默认就是暂停的？
      wx.pauseBackgroundAudio();
    }