微信小程序 小型音乐播放模块 每个页面插入不同音频

调用小程序音乐播放API

BackgroundAudioManager
BackgroundAudioManager实例，可以通过wx.getBackgroundAudioManager获取。

string str / string title 两个必须

js文件里注册一个播放事件

onMusic(){
	const mgr = wx.getBackgroundAudioManager()
	mgr.src = postList[0].music.url
	mgr.title = postList[0].music.title
}

设置可以后台播放： 在app.json文件中设置

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

每个页面播放实现播放暂停

再看一眼上面的onMusic很明显是只播放了一个音频文件，有问题，所以要把它替换成对应页面的，通过获取相应的索引拿到

const music = postList[this.data._pid].music
      mgr.src = music.url
      mgr.title = music.title

接下来你可能注意到无法停止播放音乐，所以要引入一个控制变量isPlaying到页面的data下，以及播放停止的函数下

  onMusicStop(event){
    const mgr = this.data._mgr
    mgr.pause()
    app.gIsPlayingMusic = false
    app.gIsPlayingPostId = -1
    this.setData({
      isPlaying:false
    })
  },

   onMusicStart(event){

      const mgr = this.data._mgr
       
      const music = postList[this.data._pid].music
      mgr.src = music.url
      mgr.title = music.title
      mgr.coverImgUrl = music.coverImg
 this.setData({
        isPlaying:true
      })
  }

要有图标来对应音乐播放状态，暂停或是播放中

  <image wx:if ="{{!isPlaying}}" bind:tap = "onMusicStart" class = "audio" src="/images/music/music-start.png"></image>
  <image wx:else bind:tap = "onMusicStop" class = "audio" src = "/images/music/music-stop.png"></image>

另一种方式

<image  bind:tap = "onMusic" class = "audio" src="{{isPlaying?'/images/music/music-stop.png':'/images/music/music-start.png'}}"></image>

音乐面板能够与图标状态同步

即监听背景音频播放事件,
onPlay
特点是：只要音乐播放了，传进来的callback函数就会被执行
onStop
特点是：只要音乐停止了，传进来的callback函数就会被执行

全局变量解决音乐播放状态初始化不正确的问题

app.js中设置全局变量gIsPlayingMusic : false

获取全局变量const = getApp()

让每篇文章音乐独立显示状态

一首音乐播放时让其它页面未播放，在全局App.js设置索引位-1
在start和stop中分别设置 此变量的值（start中 变量=this.data._pid; stop中 变量=-1）
pages中创建函数currentMusicPlaying（）判断 变量的id是否是当前播放的id(app.gIsPlayingMusic===this.data._pid return true)
再在isPlaying精确绑定this.currentMusicPlaying
实现单独播放不影响其它界面的音乐播放按钮

 onLoad: function (options) {
    console.log(options)
    this.data._pid = options.pid
    const postsCollected = wx.getStorageSync('posts_collected')
    this.data._postCollected = postsCollected
    const postData = postList[options.pid]
    const collected = postsCollected[this.data._pid]
    console.log(collected)
    const mgr = wx.getBackgroundAudioManager()
    this.data._mgr = mgr
    console.log(postData)
    this.setData({
      postData,
      collected,
      isPlaying:this.currentMusicIsPlaying()
    })
    mgr.onPlay(this.onMusicStart)
    mgr.onPause(this.onMusicStop)
  },

  currentMusicIsPlaying(){
    if(app.gIsPlayingMusic && app.gIsPlayingPostId === this.data._pid){
       
        return true
      }
      return false
    },
    
   

  onMusicStart(event){

      const mgr = this.data._mgr
       
      const music = postList[this.data._pid].music
      mgr.src = music.url
      mgr.title = music.title
      mgr.coverImgUrl = music.coverImg

      app.gIsPlayingMusic = true
      app.gIsPlayingPostId = this.data._pid
      this.setData({
        isPlaying:true
      })
    //const mgr = wx.getBackgroundAudioManager()
    
     
    mgr.onPlay(this.onMusicStart)
    mgr.onPause(this.onMusicStop)
  }, 

  onMusicStop(event){
    const mgr = this.data._mgr
    mgr.pause()
    app.gIsPlayingMusic = false
    app.gIsPlayingPostId = -1
    this.setData({
      isPlaying:false
    })
  },