微信小程序全局音頻播放，實現分析

1. 需求分析

育兒柚道小程序中有針對育兒教育提供的音頻課程，主要包含讀書、讀文的音頻內容。

1.1 功能需求

• 課程音頻：包含課程音頻的地方有三處
  1. 課程卡片，包含在 scrollview 中的試聽內容；

音樂卡片

1. 課程詳情頁的課程章節列表；

    

   課程詳情頁

1. 底部與導航 tab 結合的播放控件

    

   Player bar

• 音頻管理：
  1）單擊課程卡片上的音頻，播放並觸發底部播放控件，顯示播放狀態
  2）進入課程詳情頁時，單擊列表內容播放單條內容，點擊主播放按鈕，連續播放列表中的內容
  3）底層導航的播放控件播放音頻

• 音頻控件，有兩處音頻控件。
  1）底部導航音頻控件，支持【下一首/暫停/播放】
  2）詳情頁中，支持【拖動進度/暫停/播放】

• 全局播放：離開小程序後，微信聊天頁頂部顯示當前播放的音頻

   

  圖片.png

1.2 系統分析與設計

綜上述的需求，分析出我們的系統需求，

1. 音頻播放列表維護
2. 音頻播放控制管理

小程序中對於音頻播放有兩種

• 音頻播放控件 audio
• 全局唯一背景音頻管理器
  由於我們的需求中需要對音頻做全局管理，所以選型微信提供的:
  backgroundAudioManager

我們用到的屬性和方法如下：

音樂播放器的組成

圖片.png

 

將播放器的產品組成分爲三層，

1. 組件層主要處理 UI、交互、數據展現
2. 播放控制層，用於管理整體播放控制
3. 事件處理層，監聽處理全局系統中的音頻事件，播放、暫停、停止和播放進度監聽

播放器組件

圖片.png

播放器控制

圖片.png

先看一下我們用到的控制方法和微信音頻播放對應的 api

用到的 api 如下

wx.playBackgroundAudio(OBJECT)
使用後臺播放器播放音樂，對於微信客戶端來說，只能同時有一個後臺音樂在播放。

wx.pauseBackgroundAudio()
暫停播放音樂。

wx.seekBackgroundAudio(OBJECT)
控制音樂播放進度

wx.stopBackgroundAudio()
停止播放音樂。

wx.onBackgroundAudioPlay(CALLBACK)

監聽音樂播放。
wx.onBackgroundAudioPause(CALLBACK)

監聽音樂暫停。
wx.onBackgroundAudioStop(CALLBACK)
監聽音樂停止。

onLauch 監聽

作者：佰晟
鏈接：https://www.jianshu.com/p/407f551942e2
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。