WeChat 背景音乐播放

Unsplash

本次的系列博文的知识点讲解和代码，主要是来自于 七月老师 的书籍《微信小程序开发：入门与实践》，由个人总结并编写，关于更多微信小程序开发中的各项技能，以及常见问题的解决方案，还请大家购买书籍进行学习实践，该系列博文的发布已得到七月老师的授权许可

授权许可

0 系列文章目录

01 WeChat 从一个简单的“Welcome”页面来开启小程序之旅吧
02 WeChat 文章列表页面（一）
03 WeChat 文章列表页面（二）
04 WeChat 模块、模板与缓存
05 WeChat 文章详情页
06 WeChat 文章评论页（一）
07 WeChat 文章评论页（二）
08 WeChat 文章评论页（三）
09 WeChat 背景音乐播放

1 背景音乐播放

我们首先添加音乐播放的图标，并设置其切换状态

播放图标

随后调用 wx.getBackgroundAudioManager() 方法获取音乐实例

// pages/post/post-detail/post-detail.js
onMusicTap: function(event) {
  // 音乐播放实例
  const music = wx.getBackgroundAudioManager()
  music.src = this.postData.music.url;
  music.title = this.postData.music.title;
  music.coverImgUrl = this.postData.music.coverImg;
  if(this.data.isPlayingMusic) {
    music.pause()
    this.setData({
      isPlayingMusic: false
    })
  }else {
    music.play()
    this.setData({
      isPlayingMusic: true
    })
  }
}

若要小程序在后台仍能播放音乐，需要在在 app.json 中设置

"requiredBackgroundModes": ["audio", "location"]

音乐播放

在当前文章详情页中，音乐可以正常播放暂停，也能够切换到其他详情页播放其他歌曲，但还是有一些小问题存在，当一首歌曲播放完毕，音乐播放图标仍为播放状态，我们需要调用一下 BackgroundAudioManager.onEnded(function callback) 方法，监听背景音频自然播放结束后修改音乐播放图标状态

// pages/post/post-detail/post-detail.js
setMusicMonitor: function() {
  let that = this
  const music = wx.getBackgroundAudioManager()
  music.onEnded(function(){
    that.setData({
      isPlayingMusic: false
    })
  })
}

当我们播放音乐后，返回列表页，再次进入详情页，此时的音乐播放图标为未播放状态，这是因为从子页面返回到父页面后，子页面会被卸载，我们只需要设置一个全局变量，将其播放状态赋值给 isPlayingMusic 这个页面变量即可

//app.js
App({
  globalData: {
    g_isPlayingMusic: false
  }
})

在我们赋值 isPlayingMusic 的地方，都给 globalData.g_isPlayingMusic 赋相同的值即可，不要忘了在每次进入详情页时，将 globalData.g_isPlayingMusic 的值赋给 isPlayingMusic

// pages/post/post-detail/post-detail.js
initMusicStatus: function() {
  this.setData({
    isPlayingMusic: app.globalData.g_isPlayingMusic
  })
}

保存运行之后，发现音乐播放图标终于显示正常了，但我们此时进入其他详情页，其音乐播放图标状态都变成了正在播放状态，故此我们还需要多一个全局变量，记录当前所播放的歌曲

// app.js
globalData: {
  g_isPlayingMusic: false,
  g_currentMusicPostId: null
}

// pages/post/post-detail/post-detail.js
initMusicStatus: function() {
  let currentPostId = this.postData.postId
  if(app.globalData.g_isPlayingMusic && app.globalData.g_currentMusicPostId === currentPostId) {
    // 如果全局播放的音乐是当前文章的音乐，就将图标状态设置为正在播放
    this.setData({
      isPlayingMusic: true
    })
  } else {
    this.setData({
      isPlayingMusic: false
    })
  }
}

2 音乐总控开关

在真机上有个音乐总控开关，如果用户使用音乐总控开关来操作音乐，那么文章详情页的音乐播放图标就会出现状态错乱的问题

真机

解决方法也很简单，分别使用 BackgroundAudioManager.onPlay(function callback)
和 BackgroundAudioManager.onPause(function callback) 方法进行监听音乐播放与暂停事件，从而设置文章页面的音乐图标状态，使得音乐图标状态和音乐播放状态保持一致

setMusicMonitor: function() {
  let that = this
  const music = wx.getBackgroundAudioManager()
  music.onEnded(function(){
    that.setData({
      isPlayingMusic: false
    })
    app.globalData.g_isPlayingMusic = false
  })
  music.onPlay(function(){
    // 只处理当前页面的音乐播放
    if(app.globalData.g_currentMusicPostId === that.postData.postId) {
      that.setData({
        isPlayingMusic: true
      })
    }
    app.globalData.g_isPlayingMusic = true
  })
  music.onPause(function(){
    // 只处理当前页面的音乐暂停
    that.setData({
      isPlayingMusic: false
    })
  })
  app.globalData.g_isPlayingMusic = false
}

该章节的内容到这里就全部结束了，源码我已经发到了 GitHub WeChat_09 上了，有需要的同学可自行下载

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^