8.2.4 背景音乐

本节主要阐述微信小程序中对背景音乐的控制。例如，一些游戏场景须要播放背景音乐，都需要通过本节介绍的API来实现。

wx.getBackgroundAudioPlayerState(OBJECT)

获取后台音乐播放状态。 OBJECT参数说明，如表8-15所示：

表8-15

success返回参数说明，如表8-16所示：

表8-16

wx.playBackgroundAudio(OBJECT)

使用后台播放器播放音乐，对于微信客户端来说，只能同时有一个后台音乐在播放。当用户离开小程序后，音乐将暂停播放；当用户点击“显示在聊天顶部”时，音乐不会暂停播放；当用户在其他小程序占用了音乐播放器，原有小程序内的音乐将停止播放。 OBJECT参数说明，如表8-17所示：

表8-17

wx.pauseBackgroundAudio()

暂停播放音乐。

wx.seekBackgroundAudio(OBJECT)

控制音乐播放进度。 OBJECT参数说明，如表8-18所示：

表8-18

wx.stopBackgroundAudio()

停止播放音乐。

wx.onBackgroundAudioPlay(CALLBACK)

监听音乐播放。

wx.onBackgroundAudioPause(CALLBACK)

监听音乐暂停。

wx.onBackgroundAudioStop(CALLBACK)

监听音乐停止。

示例代码： wxml中：

<view class="audio-view">
  <button class="button" type="primary" bindtap="listenerButtonPlay">播放</button>
  <button class="button" type="primary" bindtap="listenerButtonPause">暂停</button>
  <button class="button" type="primary" bindtap="listenerButtonSeek">设置播放进度</button>
  <button class="button" type="primary" bindtap="listenerButtonStop">停止播放</button>
  <button class="button" type="primary" bindtap="listenerButtonGetPlayState">获取播放状态</button>
</view>

js中：

Page({
  data: {},
  listenerButtonPlay: function () {
    wx.playBackgroundAudio({
      //播放地址
      dataUrl: 'https://xxxx.xxxxx.com/xxx.mp3',
      //title 音乐名字
      title: '名字',
      //图片地址
      coverImgUrl: 'https://xxxx.xxxxx.com/xxxxxx'
    })
  },
  /**
   * 播放状态
   */
  listenerButtonGetPlayState: function () {
    wx.getBackgroundAudioPlayerState({
      success: function (res) {
        console.log(res)
        //duration 总时长
        //currentPosition 当前播放位置
        //status 播放状态
        //downloadPercent 下载状况 100 即为100%
        //dataUrl 当前播放音乐地址
      }
    })
  },
  /**
   * 监听button暂停按钮
   */
  listenerButtonPause: function () {
    wx.pauseBackgroundAudio();
  },
  /**
   * 设置进度
   */
  listenerButtonSeek: function () {
    wx.seekBackgroundAudio({
      position: 30
    })
  },
  /**
   *停止播放 
   */
  listenerButtonStop: function () {
    wx.stopBackgroundAudio()
  },


  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  }
})

运行效果如图8-3所示：

图8-3 背景音乐API示例运行效果图

注意:

• iOS 6.3.30 wx.seekBackgroundAudio 会有短暂延迟