本文編輯：  MINA搬運工瀏覽 10447 版權所有，嚴禁轉載

音樂播放狀態API

音樂播放控制API

監聽播放狀態的事件

API 的說明部分來自官方文檔，筆者補充的內容，會以 tips 形式給出。比如：

tips : 音樂播放控制API的使用，幾個小場景：（1）定制一個自己的音樂播放小程序（流量問題，可以使用緩存來解決）；（2）內容資訊類小程序的補充背景音樂；（3）睡前輔助小程序，天然白嘈音（首日上線即獲70w+用戶的小睡眠小程序）

僅對示例Demo感興趣的，請直接拉到最后。

音樂播放狀態

wx.getBackgroundAudioPlayerState(OBJECT)

獲取音樂播放狀態。

OBJECT參數說明：

success返回參數說明：

示例代碼：

wx.getBackgroundAudioPlayerState({
    success: function(res) {
        var status = res.status
        var dataUrl = res.dataUrl
        var currentPosition = res.currentPosition
        var duration = res.duration
        var downloadPercent = res.downloadPercent
    }
})

音樂播放控制

wx.playBackgroundAudio(OBJECT)

播放音樂，同時只能有一首音樂正在播放。

OBJECT參數說明

示例代碼：

wx.playBackgroundAudio({
    dataUrl: '',
    title: '',
    coverImgUrl: ''
})

wx.pauseBackgroundAudio()

暫停播放音樂。

示例代碼：wx.pauseBackgroundAudio()

wx.seekBackgroundAudio(OBJECT)

控制音樂播放進度。

OBJECT參數說明：

示例代碼：

wx.seekBackgroundAudio({
    position: 30
})

wx.stopBackgroundAudio()

停止播放音樂。

示例代碼：wx.stopBackgroundAudio()

監聽播放狀態事件

wx.onBackgroundAudioPlay(CALLBACK)

監聽音樂播放。

tips：一般情況下，被 wx.playBackgroundAudio() 方法觸發。

wx.onBackgroundAudioPause(CALLBACK)

監聽音樂暫停。

tips：一般情況下，被 wx.pauseBackgroundAudio() 方法觸發。

wx.onBackgroundAudioStop(CALLBACK)

監聽音樂停止。

tips：一般情況下，被 音樂自然播放停止 或 wx.seekBackgroundAudio() 方法導致 播放位置等于音樂總時長時 觸發。

tips：特別地，開發工具最新版本0.12.130400中 wx.stopBackgroundAudio() 方法不能觸發該事件（請讀者一起驗證一下）。這就是為什么，筆者在 onStopTap 仍然編碼 改變音樂播放和coverImg的狀態的原因。

相關 bug 說明

bug1: iOS 6.3.30 wx.seekBackgroundAudio 會有短暫延遲。（請更新至最新版本的 6.5.3 ）

bug2: wx.pauseBackgroundAudio 在開發工具中，表現為 wx.stopBackgroundAudio 的行為，在真機測試中，表現正常。（最新版本0.12.130400 開發工具中已經修復 ）

綜合案例

音樂控制的內容，為每個API寫示例的話，那就不好玩了。這部分就直接一個利用 8 個API設計的完整 Demo，先來效果吧（筆者自夸時間：音樂控制，相當優雅精美哦，注釋中有大玄機）！

注意1：gif 展示效果，沒有聲音，其實快進和快退是有效果的呢！
注意2：圖片素材，請點擊百度公有盤或者是百度私有盤 密碼：tatw

wxml(骨架)

<view class="container">
  <image class="bgaudio" src="{{changedImg?music.coverImg:'/images/bgaudio.png'}}" />
  <view class="control-view">
    <!-- 使用 data-how 定義一個0、1表示 快退或快進10秒 -->
    <image src="/images/front10.png" bindtap="onPositionTap" data-how="0"/>
    <image src="/images/{{isPlaying?'play':'pause'}}.png" bindtap="onAudioTap" />
    <image src="/images/stop.png" bindtap="onStopTap" />
    <!-- 使用 data-how 定義一個0、1表示 快退或快進10秒 -->
    <image src="/images/next10.png" bindtap="onPositionTap" data-how="1"/>
  </view>
</view>

wxss(衣服)

.bgaudio{
  height: 350rpx;
  width: 350rpx;
  margin-bottom: 100rpx;
}

.control-view image{
  height: 64rpx;
  width: 64rpx;
  margin: 30rpx;
}

js(小動作)

Page({
  data: {
    // 記錄播放狀態
    isPlaying: false,
    // 記錄 coverImg ，僅當音樂初始時和播放停止時，使用默認的圖片。播放中和暫停時，都是用當前音樂的的 coverImg
    changedImg: false,
    // 音樂內容
    music: {
      "url": "http://ws.stream.qqmusic.qq.com/C100002I8eGJ28BI17.m4a?fromtag=38",
      "title": "譚詠麟 - 朋友",
      "coverImg": "http://y.gtimg.cn/music/photo_new/T002R150x150M000004eGsCN3SUheO.jpg?max_age=2592000"
    },
  },
  onLoad: function () {
    // 頁面加載時，注冊監聽事件
    this.onAudioState();
  },
  // 點擊播放或者是暫停按鈕時觸發
  onAudioTap: function (event) {
    if (this.data.isPlaying) {
      // 正常播放的話，就暫停。并修改播放的狀態
      wx.pauseBackgroundAudio();
    } else {
      // 暫停的話，就開始播放。并修改播放的狀態
      let music = this.data.music;
      wx.playBackgroundAudio({
        dataUrl: music.url,
        title: music.title,
        coverImgUrl: music.coverImg
      })
    }
  },
  // 點擊停止音樂的播放
  onStopTap: function () {
    let that = this;
    wx.stopBackgroundAudio({
      success: function () {
        // 改變 coverImg 和 播放狀態
        that.setData({ isPlaying: false, changedImg: false });
      }
    })
  },
  // 點擊 快進10秒或者是快退10秒時，觸發
  onPositionTap: function (event) {
    let how = event.target.dataset.how;
    // 獲取音樂的播放狀態
    wx.getBackgroundAudioPlayerState({
      success: function (res) {
        // 僅僅在音樂播放中，快進和快退才生效
        // 音樂的播放狀態，1 表示播放中
        let status = res.status;
        if (status === 1) {
          // 音樂的總時長
          let duration = res.duration;
          // 音樂播放的當前位置
          let currentPosition = res.currentPosition;

          if (how === "0") {
            //注意: 快退時，當前播放位置快退 10 秒小于 0 的話，直接設置 position 為 1；否則的話直接減去 10 秒秒
            // 快退到達的位置
            let position = currentPosition - 10;
            if (position < 0) {
              position = 1;
            }
            // 執行快退
            wx.seekBackgroundAudio({
              position: position
            });
            // 給出一個友情提示，實際引用中，請刪除！！！
            wx.showToast({ title: "快退10s", duration: 500 });
          }

          if (how === "1") {
            //注意: 快進時，當前播放位置快進 10 秒后大于總時長的話，直接設置 position為 總時長減 1 
            // 快進到達的位置
            let position = currentPosition + 10;
            if (position > duration) {
              position = duration - 1;
            }
            // 執行快進
            wx.seekBackgroundAudio({
              position: position
            });
          // 給出一個友情提示，實際引用中，請刪除！！！
            wx.showToast({ title: "快進10s", duration: 500 });
          }
        } else {
          // 給出一個友情提示，實際引用中，請刪除！！！
          wx.showToast({ title: "音樂未播放", duration: 800 });
        }
      }
    })

  },
  onAudioState: function () {
    let that = this;
    wx.onBackgroundAudioPlay(function () {
      // 當 wx.playBackgroundAudio() 執行時觸發
      // 改變 coverImg 和 播放狀態
      that.setData({ isPlaying: true, changedImg: true });
      console.log("on play");
    });

    wx.onBackgroundAudioPause(function () {
      // 當 wx.pauseBackgroundAudio() 執行時觸發
      // 僅改變 播放狀態
      that.setData({ isPlaying: false });
      console.log("on pause");
    });

    wx.onBackgroundAudioStop(function () {
      // 當 音樂自行播放結束時觸發
      // 改變 coverImg 和 播放狀態
      that.setData({ isPlaying: false, changedImg: false });
      console.log("on stop");
    });
  }
})

如果對于 單個API示例有偏執的同學，請按照下面的說明拆分代碼：

• onAudioState 方法中是監聽播放狀態事件的小Demo
• onAudioTap 方法中是音樂播放控制的play和pause兩個API的小Demo
• onStopTap 方法中是音樂播放控制的stop單個API的小Demo
• onPositionTap 方法中是音樂播放控制的stop和音樂播放狀態的seek兩個API的小Demo

延伸閱讀內容

從無到有系列內容

• 從0到1：初學者入門Demo歡迎頁
• 從1到2：初學者入門Demo內容列表頁
• 從2到3：初學者Demo內容詳情頁【關于音樂控制的實際使用】