1.1 需求簡介

最近產(chǎn)品給我們提出了“在小程序中播放音頻課程”的需求,主要是有四個要點:
  • 課程管理:進入某個課程的播放頁面,獲取全部音頻列表,但暫時不播放。
  • 音頻管理:支持在播放頁面,點擊任意音頻進行播放;可自動播放下一首。比如這樣
 
  • 進度控件:支持拖動修改進度/上下首/暫停/播放,就像下面這樣。
 
  • 全局播放:當(dāng)用戶暫時離開小程序時,在微信聊天列表頁頂部展示背景音頻。
就像這樣子。
 

1.2 開發(fā)分析

好了,問題來了,怎么實現(xiàn)上面這幾個需求呢?
我陷入了沉思…………
第一條“課程管理”不難,全局維護一個數(shù)組就好了。
第二條“音頻管理”看上去是個麻煩,一開始我想到了小程序提供的audio控件。
但是隨即我就否決掉了這種想法,理由主要有兩點:
  • 微信官方提供的audio控件有默認(rèn)的樣式,如下圖,這與設(shè)計稿的需求不相符。
  • 經(jīng)過在微信官方提供的小程序?qū)嵗鼶emo中親測,如果使用audio控件,那么當(dāng)我退出當(dāng)前頁面的時候,音頻會消失,這沒有辦法滿足PM要求的“全局播放”
因此,我決定采用微信提供的backgroundAudioManager。

1.2.1 backgroundAudioManager簡介

按官方文檔的說法,backgroundAudioManager是:
全局唯一的背景音頻管理器
下面列出它的部分重要屬性和重要的方法:
屬性:
  • duration:當(dāng)前音頻長度,可以用來初始化播放控件的值。
  • currentTime:當(dāng)前播放的位置,可以用來更新播放控件的進度值
  • paused:false為播放,true表示停止/暫停
  • src:音頻數(shù)據(jù)源,注意設(shè)置src的時候會自動播放
  • title:音頻標(biāo)題(剛剛在微信聊天列表頁頂部展示的音頻title“為什么秋冬季節(jié)孩子易生病”,就是通過這里設(shè)置的)
方法:
  • play/pause/stop/seek:可以進行音頻常見的播放控制,其中seek是跳轉(zhuǎn)到特定播放進度的方法
  • onPlay/onPause/onStop/onEnded:響應(yīng)特定事件,其中onStop是主動停止,onEnded是自動播放完畢(這可用于實現(xiàn)“連續(xù)播放”)
  • onTimeUpdate:背景音頻播放進度更新事件,可與前面的currentTime屬性結(jié)合在一起,去更新控件的值。
  • onWaiting/onCanplay:音頻通常不會立刻就能播放,這兩個方法可以在音頻加載的時候為用戶做一些提示。
更多的消息請查看它的官方文檔。

1.2.2 播放控件

第三條“播放控件”也不算太難,播放/暫停/上下首都用小圖片就可以了。
但是難點在于播放進度條的模擬,前面已經(jīng)說到audio控件的樣式是不符合需求的。
那么我決定采用slider來模擬,應(yīng)該也可以搞定。
第四條,前面已經(jīng)說了,用backgroundAudioManager實現(xiàn)“全局播放”。

1.2.3 開發(fā)方案確定

好了,需求分析得差不多了,我們要開發(fā)這個需求,需要三個對象,
  • 課程管理對象,負(fù)責(zé)維護課程信息和課程音頻列表,不負(fù)責(zé)播放
 
  • 音頻管理對象,即backgroundAudioManager,負(fù)責(zé)管理音頻的播放,其中只有changeAudio方法具有修改音頻的權(quán)限
 
  • 播放控件。
 
有了這幾個對象,課程管理/音頻管理/進度控件/全局播放就都可以搞定啦。
不過,話雖然這么說,但是實際實現(xiàn)需求總是會碰到各種各樣的問題。
 

2. 功能實現(xiàn)

因為需求實在太多了,我沒法一一列出,在這里就介紹一些需要技巧的需求

2.1 Slider控件模擬進度

前面提到,控件大概長這樣
 
所以得用slider來模擬,但是模擬并不容易。
哈?你說為什么?我慢慢告訴你。

2.1.1 需求一:控件隨著音頻播放,自動更新

PM的需求是:控件隨著音頻播放,自動更新進度,左值隨著進度更新,右值為音頻總長度。
但是小程序自帶的slider不支持展示左右值,我們只能自己模擬。
<!--  音頻進度控件 -->
<view class="course-control-process">
    // 左值展示,currentProcess
    <text class="current-process">{{currentProcess}}</text>
    
    // 進度條
    <slider
      bindchange="hanleSliderChange"               // 響應(yīng)拖動事件
      bindtouchstart="handleSliderMoveStart"
      bindtouchend="handleSliderMoveEnd"
      min="0"
      max="{{sliderMax}}"
      activeColor="#8f7df0"
      value="{{sliderValue}}"/>
      
    // 右值展示,totalProcess
    <text class="total-process">{{totalProcess}}</text>
</view> 
currentProcess為左值、totalProcess為右值、sliderMax控件最大值、sliderValue為當(dāng)前控件的value。
那么,怎么更新這些數(shù)值呢?前面提到backgroundAudioManager有一個onTimeUpdate方法,在這里面去更新進度值就可以了。
//  formatAudioProcess函數(shù)我就不放了,就是把時間格式化成00:15這樣就行了

onTimeUpdate() {
  // 省略一些判斷代碼
  self.page.setData({
    currentProcess: formatAudioProcess(globalBgAudioManager.currentTime),
    sliderValue: Math.floor(globalBgAudioManager.currentTime)
  });
}, 
這里有一件值得注意的是,就是在進入同一個課程的播放頁時,由于原page很可能已經(jīng)銷毀(比如你執(zhí)行navigateTo),因此需要在初始化的時候更新原有的data值,比如當(dāng)前的播放進度currentProcess,這就要從當(dāng)前的backgroundAudioManager里去拿。
## 檢查是否同一個課程,如果是的話,更新進度

if (id !== globalCourseAudioListManager.getCurrentCourseInfo().id)

## 更新方法
  updateControlsInOldAudio() {
  
    // 獲取當(dāng)前音頻
    const currentAudio = globalCourseAudioListManager.getCurrentAudio();
    
    // 更新進度和控件內(nèi)容
    this.setData({
      currentProcess: formatAudioProcess(globalBgAudioManager.currentTime),
      sliderValue: formatAudioProcess(globalBgAudioManager.currentTime),
      sliderMax: Math.floor(currentAudio.duration / 1000) - 1 || 0,
      totalProcess: formatAudioProcess(currentAudio.duration / 1000 || 0),
      hasNextAudio: !globalCourseAudioListManager.isRightEdge() && this.data.hasBuy,
      hasPrevAudio: !globalCourseAudioListManager.isLeftEdge() && this.data.hasBuy,
      paused: globalBgAudioManager.paused,
      currentPlayingAudioId: currentAudio.audio_id,
      courseChapterTitle: currentAudio.title
    });
  }, 

2.1.2 需求二:拖動進度條,自動跳轉(zhuǎn)到特定位置

注意到前面slider控件具有bindchange="hanleSliderChange",那么我們就可以拿到value值,然后去更新音頻了
hanleSliderChange(e) {
    const position = e.detail.value;
    this.seekCurrentAudio(position);
  },
  // 拖動進度條控件
  seekCurrentAudio(position) {
  
    // 更新進度條
    const page = this;
    // 音頻控制跳轉(zhuǎn)
    // 這里有一個詭異bug:seek在暫停狀態(tài)下無法改變currentTime,需要先play后pause
    const pauseStatusWhenSlide = globalBgAudioManager.paused;
    if (pauseStatusWhenSlide) {
      globalBgAudioManager.play();
    }
    
    globalBgAudioManager.seek({
      position: Math.floor(position),
      success: () => {
        page.setData({
          currentProcess: formatAudioProcess(position),
          sliderValue: Math.floor(position)
        });
        if (pauseStatusWhenSlide) {
          globalBgAudioManager.pause();
        }
        console.log(`The process of the audio is now in ${globalBgAudioManager.currentTime}s`);
      }
    });
  }, 
看上去有一點比較奇怪是不是?backgroundAudioManager的seek方法是沒有success回調(diào)的,這里被我改了。
seek(options) {
    wx.seekBackgroundAudio(options);  // 這樣實現(xiàn),就可以配置success回調(diào)了
} 
但是,“onTimeUpdate事件觸發(fā)slider控件更新”和“手動拖動觸發(fā)slider更新”是有沖突的,假如說兩個函數(shù)都要改slider,聽誰的?
但是,可以利用監(jiān)測touchstart和touchend事件,來檢查是否在滑動。如果在滑動,禁止onTimeUpdate去修改slider控件更新就行了。
因此,我先設(shè)定一個變量,來標(biāo)記是否正在滑動
handleSliderMoveStart() {
    this.setData({
      isMovingSlider: true
    });
  },
  handleSliderMoveEnd() {
    this.setData({
      isMovingSlider: false
    });
  }, 
在滑動期間禁止更新進度條即可
onTimeUpdate() {
    // 在move的時候,不要更新進度條控件
    if (!self.page.data.isMovingSlider) {
      self.page.setData({
        currentProcess: formatAudioProcess(globalBgAudioManager.currentTime),
        sliderValue: Math.floor(globalBgAudioManager.currentTime)
      });
    }
    
    // 其他省略
}, 

2.2 backgroundAudioManager相關(guān)需求

在開始下一個需求介紹之前,不知道各位有沒有疑問:
我在哪兒設(shè)置的onTimeupdate方法?
OK,我來介紹下。
首先,全局獲取
this.backgroundAudioManager = wx.getBackgroundAudioManager(); 
其次,在play/index.js中引入backgroundAudioManager
let globalBgAudioManager = app.backgroundAudioManager; 
在適當(dāng)?shù)臅r候,比如我就是onLoad,擴展globalBgAudioManager對象。——這樣我就把具體的功能放進了具體的page中,不同的page中針對backgroundAudioManager可以有不同的實現(xiàn)。
this.initBgAudioListManager(); 
接下來我們看看這個拓展到底干了什么。
initBgAudioListManager() {
    // options中的函數(shù)在執(zhí)行的時候,this指向函數(shù)本身(親測),因此這里需要保存Page對應(yīng)的this。
    const page = this;
    const self = globalBgAudioManager;
    const options = {
        // options在后面會介紹
    };
    
    // decorateBgAudioListManager函數(shù),直接修改globalBgAudioManager對象,從而實現(xiàn)方法的拓展
    globalBgAudioManager = decorateBgAudioListManager(globalBgAudioManager, options); 
好了,怎么引入的現(xiàn)在已經(jīng)說完了,接下來就講需求,也就是介紹options里面干了什么。
其實options里面都是backgroundAudioManager已經(jīng)有的方法,具體可以參考文檔。我只是做了改寫

2.2.1 需求三:繞過onCanPlay,提醒用戶音頻在加載

眾所周知,音頻需要加載一段時間才可以播放,為此小程序的全局播放對象,即backgroundAudioManager提供了onWaiting和onCanplay,看上去天生就是為了音頻加載的交互實現(xiàn)的。
但不知道為什么,onCanplay無!法!觸!發(fā)!和社區(qū)提了這個問題也沒有人鳥我哎……心痛。
算了算了,他強由他強,我繞我的墻。。。
首先,在options中,改寫onWaiting:先提示用戶正在加載當(dāng)中,isWaiting進行標(biāo)記(“看!音頻在Waiting!”)
const options = {
    onWaiting() {
        wx.showLoading({
          title: '音頻加載中…'
        });
        globalBgAudioManager.isWaiting = true;
    },
} 
 
然后接下來,在時間進度發(fā)生更新的時候(這相當(dāng)于開始播放了),把Loading窗口關(guān)了就行。同樣是在options中去改寫onTimeUpdate。
onTimeUpdate() {
    if (self.isWaiting) {
      self.isWaiting = false;
      setTimeout(() => {
        wx.hideLoading();
      }, 300);
      // 設(shè)置300ms是為了避免某些音頻加載過快而導(dǎo)致Loading效果一閃而過對用戶造成糟糕的體驗
    }
    // 以下代碼省略
}, 

2.2.2 需求四:點擊某個音頻,實現(xiàn)播放

這個需求的麻煩之處,在于需要檢查點擊的音頻是什么,比如假定你在播放音頻A,你重新點擊A,那當(dāng)然不用重播了啊。
以及iOS版本的小程序和阿里云服務(wù)器似乎有點過節(jié),下面就會看到。
在pages/play/index內(nèi)部,先響應(yīng)點擊事件
## pages/play/index

  outlineOperation(e) {
    // 獲取音頻地址
    const courseAudio = e.currentTarget.dataset.outline || {};
    const targetAudioId = courseAudio.audio_id;
    // 中間省略一系列合法性檢查。
    this.playTargetAudio(targetAudioId);
  }, 
然后執(zhí)行播放相關(guān)操作,這個globalCourseAudioListManager雖然前面提到過,但是一會兒再具體介紹,它做了什么就直接看注釋好了
## pages/play/index

  /**
   * 點擊/自動播放 目標(biāo)音頻
   * @param {*Number} targetAudioId
   * - 檢查是否點擊到同一個音頻
   * - 檢查是否完全播放完畢
   * - 若未播放完畢,或者點擊的不是同一個音頻,先暫停當(dāng)前音頻
   * - 執(zhí)行音頻播放操作
   */
  playTargetAudio(targetAudioId) {
    const currentAudio = globalCourseAudioListManager.getCurrentAudio();
    
    // 點擊未停止的原音頻的話,沒必要響應(yīng)
    if (targetAudioId === currentAudio.audio_id && !!globalBgAudioManager.currentTime) {
      return false;
    } else {
      this.getAudioSrc(targetAudioId).then(() => {
      
        // 若未暫停,則先暫停
        if (!globalBgAudioManager.paused) {
          globalBgAudioManager.pause();
        }
        
        // 全局切換當(dāng)前播放的音頻index(此時還沒有開始播放)
        globalCourseAudioListManager.changeCurrentAudioById(targetAudioId);

        // 更新當(dāng)前控件狀態(tài),比如新音頻的title和長度,總要更新吧。
        this.updateControlsInNewAudio();
        
        // 更換并且播放背景音樂
        globalBgAudioManager.changeAudio();
      });
    }
  }, 
好了,終于到這個changeAudio函數(shù)了,它也是剛剛提到的options里面的一部分。
## changeAudio是options的屬性,被擴展進入了backgroundAudioManager

  // 修改當(dāng)前音頻
  changeAudio() {
  
    // 獲取并且
    const { url, audio_id, title, content_type_signare_url } = globalCourseAudioListManager.getCurrentAudio();
    const { doctor, name, image } = globalCourseAudioListManager.courseInfo;
    self.title = title;
    self.epname = name;
    self.audioId = audio_id;
    self.coverImgUrl = image;
    self.singer = doctor.nickname || '丁香醫(yī)生';
    
    // iOS使用content_type_signare_url
    const src = isIOS() ? content_type_signare_url : url;
    if (!src) {
      showToast({
        title: '音頻丟失,無法播放',
        icon: 'warn',
        duration: 2000
      });
    } else {
      self.src = src;
    }
} 
為什么這里iOS要用content_type_signare_url?(它是我們后端返回的一個字段)
因為iOS小程序發(fā)起音頻文件請求的時候,會默認(rèn)帶上content-type:octet-stream,而我們的音頻文件URL又帶有Signatrue簽名參數(shù),阿里云服務(wù)器似乎會默認(rèn)把content-type加入到簽名當(dāng)中……于是我就遇上了403錯誤。
解決方案有兩個:
  • 讓后端負(fù)責(zé)CDN服務(wù)器的同事,在我請求獲取音頻src地址之前,先請求一次資源,并且做好緩存。
  • 把音頻地址改成公開的。

2.3 courseAudioListManager相關(guān)需求

前面提到,我需要維護一個全局的課程信息和音頻列表的管理對象,然后,就能操作音頻列表了。
## 在app.js當(dāng)中初始化
this.courseAudioListManager = createCourseAudioListManager();

## 在pages/play/index.js里面引用
const globalCourseAudioListManager = app.courseAudioListManager; 
這個對象其實沒有太多好介紹的,比較簡單。
又比如,前面提到“點擊某個音頻并自動播放”,其中有一步是這樣的。
// 全局切換當(dāng)前播放的音頻index(此時還沒有開始播放)
globalCourseAudioListManager.changeCurrentAudioById(targetAudioId); 
就是根據(jù)id來修改音頻的索引,它是這么干的。
changeCurrentAudioById(audioId = -1) {
    this.currentIndex = this.audioList.findIndex(audio => audio.audio_id === audioId);
}, 
其他,具體有哪些方法,可以看前面的1.2.3節(jié)“開發(fā)方案確定”中的腦圖。
不過,它有個addAudioSrc,可以解決重播失敗的問題。
 

2.3.1 用重新加載src的方法,解決重播失敗

當(dāng)一個音頻的播放被“停止”而不是“暫停”的時候,再調(diào)用play()方法,是不會重播的,親測調(diào)用seek方法執(zhí)行跳轉(zhuǎn)也不行。
比如,當(dāng)我試聽完了一段音頻,想重新聽的時候,常規(guī)的play是無能的……怎么辦?當(dāng)然是繞過去啊
當(dāng)你點擊播放按鈕的時候,
  • 首先通過一系列檢查,就會觸發(fā)下面這個playTargetAudio
handleStartPlayClick() {

    // 以上省略,若globalBgAudioManager.currentTime為false,表示認(rèn)為你在點擊一個已經(jīng)播放完畢的音頻
    } else if (!globalBgAudioManager.currentTime) {
      this.playTargetAudio(currentAudio.audio_id);
    } else 
    // 以下省略
} 
  • 在playTargetAudio內(nèi)部依次執(zhí)行g(shù)etAudioSrc/changeCurrentAudioById/changeAudio
this.getAudioSrc(targetAudioId).then(() => {
        // 省略
        
        // 全局切換當(dāng)前播放的音頻index
        globalCourseAudioListManager.changeCurrentAudioById(targetAudioId);
        
        // 省略
        
        // 更換并且播放背景音樂
        globalBgAudioManager.changeAudio();
      });
    } 
  • 在getAudioSrc內(nèi)部,主要的作用就是,更新了一下新的src
globalCourseAudioListManager.addAudioSrc(res.items[0]); 
然后我們看看addAudioSrc干了什么
## 現(xiàn)在在courseAudioListManager內(nèi)部

    addAudioSrc(audioSrcObject) {
      this.audioList = this.audioList.map(audio => {
      
        // 強制更新特定id的audio對象
        // 新的src隱藏在audioSrcObject里面
        
        if (Number(audio.audio_id) === Number(audioSrcObject.id)) {
          return Object.assign(audio, audioSrcObject, { id: audio.id });
        } else {
          return audio;
        }
      });
    }, 
現(xiàn)在src已經(jīng)更新完了??瓷先ッ看潍@取到的音頻src都指向同一個音頻,但是,音頻的src地址是帶有時間戳的,這避免了緩存,backgroundAudioManager設(shè)置src的時候,就會重新加載了~
當(dāng)然這樣,就沒有緩存了,交互上會有所犧牲,每次重播的時候都會閃一下“音頻加載中”。
如果各位有好的辦法實現(xiàn)緩存,歡迎交流哈。
 

3. 其他一些經(jīng)驗

  • 如果代碼過長,不要用三目運算符,很難讀。
  • 音頻播放可能出現(xiàn)錯誤,需要用onError加以捕獲。
  • 最后,歡迎留言~!