微信小程序的两种背景播放(InnerAudioContext,BackgroundAudioManager)写法及区别

在小程序中,有两个音频播放,一个是InnerAudioContext(音频),一个是BackgroundAudioManager(背景音频)

先说说这两个的区别:

InnerAudioContext	BackgroundAudioManager
没有标题	必须填写标题
没有封面,专辑名,歌手等信息	可填封面,专辑名,歌手等信息
在小程序进入后台的时候会被暂停	在小程序进入后台时依旧会播放
手机状态栏不会有信息,微信内没有悬浮标志	手机状态栏会有类似于QQ音乐的音乐框,微信内部有悬浮的标志
只能通过事件方法进行暂停,销毁	用户可以通过状态栏,悬浮窗进行暂停,销毁
多次执行会同时播放多个音频	多次执行只会重新播放,不会出现多个
同一src多次调用会多次播放	同一src多次调用不多次播放,不重新播放(不影响播放)

再说说使用方法
其实两者的使用方法一模一样
写法:
InnerAudioContext

// audio.js

const innerAudioContext = wx.createInnerAudioContext()

Page({
  data: {
    src: ''
  },
  onLoad:function(options){
    innerAudioContext.autoplay = true
    innerAudioContext.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
    innerAudioContext.onPlay(() => {
      console.log('开始播放')
    })
    innerAudioContext.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    })
  
    innerAudioContext.onPause(
      () =>{
        console.log('停止播放')
      }
    )
  },
  audioPlay: function () {
    innerAudioContext.play()
  },
  audioPause:function(){
    innerAudioContext.pause()
  }
})

// audio.js

const bgAudioMannager = wx.BackgroundAudioManager()

Page({
  data: {
    src: ''
  },
  onLoad:function(options){
    bgAudioMannager.autoplay = true
    bgAudioMannager.title = '标题';
    innerAudioContext.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
    bgAudioMannager.onPlay(() => {
      console.log('开始播放')
    })
    bgAudioMannager.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    })
  
    bgAudioMannager.onPause(
      () =>{
        console.log('停止播放')
      }
    )
  },
  audioPlay: function () {
    bgAudioMannager.play()
  },
  audioPause:function(){
    bgAudioMannager.pause()
  }
})