1.7 背景音乐播放

1、显示音乐播放图标

1.1 新增音乐播放图片

post-detail.wxml

image.png

1.2 添加音乐播放的CSS代码

post-detail.wxss

.music{
  width: 110rpx;
  height: 110rpx;
  position: absolute;
  left: 50%;
  margin-left: -51rpx;
  top: 180rpx;
  opacity: 0.9;
}

1.3 新增isPlayingMusic控制变量

post-detail.js

image.png

image.png

2、切换音乐播放图标

post-detail.js

image.png

image.png

3、背景音乐播放的特点

• 1）音乐播放不受页面关闭的影响，即使一个页面被unload掉，音乐依然会继续播放
• 2） 同时只能有一个后台音乐在播放，如果播放另外一首音乐，那么当前音乐将停止
• 3）如果用户不主动关闭音乐，那么只有在退出小程序后音乐播放才会停止，关闭当前页面是不会影响小程序音乐播放的
• 4）除了调用MINA框架的API来控制音乐播放，小程序在模拟器中还提供了一个总控开关来控制音乐的播放

4、实现单页面背景音乐播放

post-detail.js

onMusicTap:function(event){
    if (this.data.isPlayingMusic){
      wx.pauseBackgroundAudio();
      this.setData({
        isPlayingMusic:false
      })
    }else{
      wx.playBackgroundAudio({
        dataUrl: this.postData.music.url,
        title:this.postData.music.title,
        coverImgUrl:this.postData.music.coverImg
      })
      this.setData({
        isPlayingMusic: true
      })
    }

5、监听音乐播放

上面的代码有一个小BUG，就是播放完一首歌之后，音乐图标应该恢复成未播放状态，但是 实际情况如下图所示，图标状态还是处于正在播放状态

image.png

官方API提供了以下3个方法来监听音乐播放的各种状态：

image.png

解决BUG的代码如下：

post-detail.js

image.png

image.png

然后就可以看到播放完音乐之后，图标也恢复了未播放的状态

image.png

6、全局变量与全局音乐播放

6.1 添加全局变量

app.js

image.png

6.2 获取小程序App对象

post-detail.js

image.png

image.png

6.3 修改onMusicTap方法

post-detail.js

image.png

6.4 修改setMusicMonitor方法

post-detail.js

image.png

6.5 初始化音乐播放图标的状态

post-detail.js

image.png

6.6 调用initMusicStatus

post-detail.js

image.png

可以看到，在A文章播放音乐，退出A页面后再进入A页面，音乐播放图标仍然是正在播放的状态

image.png

image.png

不过有个问题是：点击其它文章，例如B文章，还是播放了A文章的音乐

6.7 新增全局变量保存正在播放音乐的id号

app.js

image.png

6.8 保存音乐的id号

post-detail.js

image.png

6.9 修改initMusicStatus方法

post-detail.js

image.png

效果如下（都是播放各个列表的音乐）：

image.png

image.png

7、音乐总控开关

细心可以发现，模拟器上面的音乐播放器开发不能影响图标的变化

7.1 添加总控开关事件监听函数

post-detail.js

 wx.onBackgroundAudioPlay(function(event){
      //只处理当前页面的音乐播放
      if (app.globalData.g_currentMusicPostId == that.postData.postId){
        that.setData({
          isPlayingMusic: true
        })
      }
      app.globalData.g_isPlayingMusic = true;
    });

    wx.onBackgroundAudioPause(function(){
      //只处理当前页面的音乐暂停
      if (app.globalData.g_currentMusicPostId == that.postData.postId) {
        that.setData({
          isPlayingMusic: false
        })
      }
      app.globalData.g_isPlayingMusic = false;
    })

image.png

效果如下：

image.png

image.png

8、显示音乐的封面图片

8.1 显示音乐封面图

post-detail.js

image.png

效果如下：

image.png

image.png