微信小程序 背景音樂BackgroundAudioManager

BackgroundAudioManager背景音頻

1. 屬性說明

（1）BackgroundAudioManager類屬性

BackgroundAudioManager類爲全局唯一的背景音頻管理器。可通過API函數wx.getBackgroundAudioManager獲取，當小程序切入後臺時，如果音頻處於播放狀態，可以繼續播放。但是後臺狀態不能通過調用API操縱音頻的播放狀態。

注意：從微信客戶端6.7.2版本開始，若需要在小程序切後臺後繼續播放音頻，需要在app.json 中配置 requiredBackgroundModes屬性。開發版和體驗版上可以直接生效，正式版還需通過審覈。

表【】BackgroundAudioManager類屬性名

屬性名	類型	說明
src	string	音頻的數據源（2.2.3 開始支持雲文件ID）。默認爲空字符串，當設置了新的 src 時，會自動開始播放，目前支持的格式有 m4a, aac, mp3, wav。
startTime	number	音頻開始播放的位置（單位：s）。
title	string	音頻標題，用於原生音頻播放器音頻標題（必填）。原生音頻播放器中的分享功能，分享出去的卡片標題，也將使用該值。
epname	string	專輯名，原生音頻播放器中的分享功能，分享出去的卡片簡介，也將使用該值。
singer	string	歌手名，原生音頻播放器中的分享功能，分享出去的卡片簡介，也將使用該值。
coverImgUrl	string	封面圖 URL，用於做原生音頻播放器背景圖。原生音頻播放器中的分享功能，分享出去的卡片配圖及背景也將使用該圖。
webUrl	string	頁面鏈接，原生音頻播放器中的分享功能，分享出去的卡片簡介，也將使用該值。
protocol	string	音頻協議。默認值爲 'http'，設置 'hls' 可以支持播放 HLS 協議的直播音頻。
duration	number	當前音頻的長度（單位：s），只有在有合法 src 時返回。（只讀）
currentTime	number	當前音頻的播放位置（單位：s），只有在有合法 src 時返回。（只讀）
paused	boolean	當前是否暫停或停止。（只讀）
buffered	number	音頻已緩衝的時間，僅保證當前播放時間點到此時間點內容已緩衝。（只讀）

 

（2）BackgroundAudioManager類方法

BackgroundAudioManager所有類方法如表【】所示。

表【】BackgroundAudioManager類方法說明

方法名	說明
BackgroundAudioManager.play()	播放音樂
BackgroundAudioManager.pause()	暫停音樂
BackgroundAudioManager.seek(number currentTime)	跳轉到指定位置
BackgroundAudioManager.stop()	停止音樂
BackgroundAudioManager.onCanplay(function callback)	監聽背景音頻進入可播放狀態事件。 但不保證後面可以流暢播放
BackgroundAudioManager.onWaiting(function callback)	監聽音頻加載中事件。當音頻因爲數據不足，需要停下來加載時會觸發
BackgroundAudioManager.onError(function callback)	監聽背景音頻播放錯誤事件
BackgroundAudioManager.onPlay(function callback)	監聽背景音頻播放事件
BackgroundAudioManager.onPause(function callback)	監聽背景音頻暫停事件
BackgroundAudioManager.onSeeking(function callback)	監聽背景音頻開始跳轉操作事件
BackgroundAudioManager.onSeeked(function callback)	監聽背景音頻完成跳轉操作事件
BackgroundAudioManager.onEnded(function callback)	監聽背景音頻自然播放結束事件
BackgroundAudioManager.onStop(function callback)	監聽背景音頻停止事件
BackgroundAudioManager.onTimeUpdate(function callback)	監聽背景音頻播放進度更新事件，只有小程序在前臺時會回調。
BackgroundAudioManager.onNext(function callback)	監聽用戶在系統音樂播放面板點擊下一曲事件（僅iOS）
BackgroundAudioManager.onPrev(function callback)	監聽用戶在系統音樂播放面板點擊上一曲事件（僅iOS）

2. 編碼測試

新建backgroundAudio頁面，在WXML中添加如下代碼：

<!-- demo3.9 backgroundAudio頁面 backgroundAudio.wxml-->
<view class='container'>
  <view class='page-body'>
    < text class='h1'>背景音頻BackgroundAudioManager編碼測試</ text >
    <view class='demo-box'>
      <view class="btn-area">
        <view class="title">點擊下方switch開啓或關閉背景音樂</view>
          <view class="tc">注意：離開當前頁面後背景音樂將保持播放，只有完全關閉小程序才停止（點擊右上角膠囊按鈕的關閉仍然播放）</view>
          設置音樂
          <text wx:if="{{switchStatus}}">開啓</text>
          <text wx:else>關閉</text>
          <switch bindchange="switchChange" checked />
           </view>
    </view>
  </view>
</view>

頁面的邏輯處理JS代碼如下：

// demo3.9 backgroundAudio頁面 backgroundAudio.js
const backgroundAudioManager = wx.getBackgroundAudioManager() //獲取背景音頻實例
backgroundAudioManager.title = '歡快的背景'
backgroundAudioManager.singer = 'toky'
backgroundAudioManager.coverImgUrl = '' //封面圖 URL
// 設置了 src 之後會自動播放（src爲雲開發中雲存儲空間文件的鏈接）
backgroundAudioManager.src = 'https://6465-demo-p9hhp-1300526081.tcb.qcloud.la/toky/
             backgroundmusic.mp3?sign=db2895a2030cea0242a274d23354cf04&t=1575194113'
var that = backgroundAudioManager
// 背景音樂循環的方法
// 1、onEnded監聽播放自然結束
backgroundAudioManager.onEnded(function() {
  // 2、必須重新設置src才能循環之後會自動播放
  backgroundAudioManager.src = 'https://6465-demo-p9hhp-1300526081.tcb.qcloud.la/toky/
             backgroundmusic.mp3?sign=db2895a2030cea0242a274d23354cf04&t=1575194113'
})
Page({
  data: { switchStatus: true },
  switchChange: function(e) {
    let switchStatus = e.detail.value//獲取switch開關狀態
      this.setData({
      switchStatus: switchStatus
    })
    if (switchStatus) {
      backgroundAudioManager.play()//播放
    } else {
      backgroundAudioManager.pause()//暫停
    }
  }
})

當然，僅僅使用以上代碼這時開發工具中還會提示一個錯誤，如圖【】所示。

 

圖【】開發工具提示需在app.json中進行權限配置

app.json中的requiredBackgroundModes屬性是用於配置小程序的後臺權限的，其屬性值是一個String類型的數組，在app.json中添加如下代碼：

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

通過真機調試可以看到運行效果如圖【】所示。

                                  （a）進入頁面默認播放  （b）點開懸浮窗  （c）關閉switch暫停播放 （d）後臺播放

                                                           圖【】BackgroundAudioManager背景音頻編碼測試