WeChat 背景音乐播放

作者: Nian糕 | 来源:发表于2020-05-28 10:20 被阅读0次
    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

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

    相关文章

      网友评论

        本文标题:WeChat 背景音乐播放

        本文链接:https://www.haomeiwen.com/subject/yzpwdhtx.html