微信小程式音訊功能開發實(cai)踐(keng)

1. 需求分析與開發方案

1.1 需求簡介

• 課程管理：進入某個課程的播放頁面，獲取全部音訊列表，但暫時不播放。
• 音訊管理：支援在播放頁面，點選任意音訊進行播放；可自動播放下一首。比如這樣

• 進度控制元件：支援拖動修改進度／上下首／暫停／播放，就像下面這樣。

• 全域性播放：當使用者暫時離開小程式時，在微信聊天列表頁頂部展示背景音訊。

1.2 開發分析

好了，問題來了，怎麼實現上面這幾個需求呢？

• 微信官方提供的audio控制元件有預設的樣式，如下圖，這與設計稿的需求不相符。

• 經過在微信官方提供的小程式例項Demo中親測，如果使用audio控制元件，那麼當我退出當前頁面的時候，音訊會消失，這沒有辦法滿足PM要求的“全域性播放”

1.2.1 backgroundAudioManager簡介

全域性唯一的背景音訊管理器

• duration：當前音訊長度，可以用來初始化播放控制元件的值。
• currentTime：當前播放的位置，可以用來更新播放控制元件的進度值
• paused：false為播放，true表示停止／暫停
• src：音訊資料來源，注意設定src的時候會自動播放
• title：音訊標題（剛剛在微信聊天列表頁頂部展示的音訊title“為什麼秋冬季節孩子易生病”，就是通過這裡設定的）

• play／pause／stop／seek：可以進行音訊常見的播放控制，其中seek是跳轉到特定播放進度的方法
• onPlay／onPause／onStop／onEnded：響應特定事件，其中onStop是主動停止，onEnded是自動播放完畢（這可用於實現“連續播放”）
• onTimeUpdate：背景音訊播放進度更新事件，可與前面的currentTime屬性結合在一起，去更新控制元件的值。
• onWaiting／onCanplay：音訊通常不會立刻就能播放，這兩個方法可以在音訊載入的時候為使用者做一些提示。

1.2.2 播放控制元件

1.2.3 開發方案確定

• 課程管理物件，負責維護課程資訊和課程音訊列表，不負責播放

• 音訊管理物件，即backgroundAudioManager，負責管理音訊的播放，其中只有changeAudio方法具有修改音訊的許可權

• 播放控制元件。

2. 功能實現

2.1 Slider控制元件模擬進度

2.1.1 需求一：控制元件隨著音訊播放，自動更新

<!--  音訊進度控制元件 -->
<view class="course-control-process">
    // 左值展示，currentProcess
    <text class="current-process">{{currentProcess}}</text>
    
    // 進度條
    <slider
      bindchange="hanleSliderChange"               // 響應拖動事件
      bindtouchstart="handleSliderMoveStart"
      bindtouchend="handleSliderMoveEnd"
      min="0"
      max="{{sliderMax}}"
      activeColor="#8f7df0"
      value="{{sliderValue}}"/>
      
    // 右值展示，totalProcess
    <text class="total-process">{{totalProcess}}</text>
</view> 複製程式碼

//  formatAudioProcess函式我就不放了，就是把時間格式化成00:15這樣就行了

onTimeUpdate() {
  // 省略一些判斷程式碼
  self.page.setData({
    currentProcess: formatAudioProcess(globalBgAudioManager.currentTime),
    sliderValue: Math.floor(globalBgAudioManager.currentTime)
  });
}, 複製程式碼

## 檢查是否同一個課程，如果是的話，更新進度

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

## 更新方法
  updateControlsInOldAudio() {
  
    // 獲取當前音訊
    const currentAudio = globalCourseAudioListManager.getCurrentAudio();
    
    // 更新進度和控制元件內容
    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 需求二：拖動進度條，自動跳轉到特定位置

hanleSliderChange(e) {
    const position = e.detail.value;
    this.seekCurrentAudio(position);
  },
  // 拖動進度條控制元件
  seekCurrentAudio(position) {
  
    // 更新進度條
    const page = this;
    // 音訊控制跳轉
    // 這裡有一個詭異bug：seek在暫停狀態下無法改變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`);
      }
    });
  }, 複製程式碼

seek(options) {
    wx.seekBackgroundAudio(options);  // 這樣實現，就可以配置success回撥了
} 複製程式碼

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相關需求

我在哪兒設定的onTimeupdate方法？

this.backgroundAudioManager = wx.getBackgroundAudioManager(); 複製程式碼

let globalBgAudioManager = app.backgroundAudioManager; 複製程式碼

this.initBgAudioListManager(); 複製程式碼

initBgAudioListManager() {
    // options中的函式在執行的時候，this指向函式本身（親測），因此這裡需要儲存Page對應的this。
    const page = this;
    const self = globalBgAudioManager;
    const options = {
        // options在後面會介紹
    };
    
    // decorateBgAudioListManager函式，直接修改globalBgAudioManager物件，從而實現方法的擴充
    globalBgAudioManager = decorateBgAudioListManager(globalBgAudioManager, options); 複製程式碼

2.2.1 需求三：繞過onCanPlay，提醒使用者音訊在載入

const options = {
    onWaiting() {
        wx.showLoading({
          title: '音訊載入中…'
        });
        globalBgAudioManager.isWaiting = true;
    },
} 複製程式碼

onTimeUpdate() {
    if (self.isWaiting) {
      self.isWaiting = false;
      setTimeout(() => {
        wx.hideLoading();
      }, 300);
      // 設定300ms是為了避免某些音訊載入過快而導致Loading效果一閃而過對使用者造成糟糕的體驗
    }
    // 以下程式碼省略
}, 複製程式碼

2.2.2 需求四：點選某個音訊，實現播放

## pages/play/index

  outlineOperation(e) {
    // 獲取音訊地址
    const courseAudio = e.currentTarget.dataset.outline || {};
    const targetAudioId = courseAudio.audio_id;
    // 中間省略一系列合法性檢查。
    this.playTargetAudio(targetAudioId);
  }, 複製程式碼

## pages/play/index

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

        // 更新當前控制元件狀態，比如新音訊的title和長度，總要更新吧。
        this.updateControlsInNewAudio();
        
        // 更換並且播放背景音樂
        globalBgAudioManager.changeAudio();
      });
    }
  }, 複製程式碼

## changeAudio是options的屬性，被擴充套件進入了backgroundAudioManager

  // 修改當前音訊
  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 || '丁香醫生';
    
    // 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;
    }
} 複製程式碼

• 讓後端負責CDN伺服器的同事，在我請求獲取音訊src地址之前，先請求一次資源，並且做好快取。
• 把音訊地址改成公開的。

2.3 courseAudioListManager相關需求

## 在app.js當中初始化
this.courseAudioListManager = createCourseAudioListManager();

## 在pages/play/index.js裡面引用
const globalCourseAudioListManager = app.courseAudioListManager; 複製程式碼

// 全域性切換當前播放的音訊index（此時還沒有開始播放）
globalCourseAudioListManager.changeCurrentAudioById(targetAudioId); 複製程式碼

changeCurrentAudioById(audioId = -1) {
    this.currentIndex = this.audioList.findIndex(audio => audio.audio_id === audioId);
}, 複製程式碼

2.3.1 用重新載入src的方法，解決重播失敗

• 首先通過一系列檢查，就會觸發下面這個playTargetAudio

handleStartPlayClick() {

    // 以上省略，若globalBgAudioManager.currentTime為false，表示認為你在點選一個已經播放完畢的音訊
    } else if (!globalBgAudioManager.currentTime) {
      this.playTargetAudio(currentAudio.audio_id);
    } else 
    // 以下省略
} 複製程式碼

• 在playTargetAudio內部依次執行getAudioSrc／changeCurrentAudioById／changeAudio

this.getAudioSrc(targetAudioId).then(() => {
        // 省略
        
        // 全域性切換當前播放的音訊index
        globalCourseAudioListManager.changeCurrentAudioById(targetAudioId);
        
        // 省略
        
        // 更換並且播放背景音樂
        globalBgAudioManager.changeAudio();
      });
    } 複製程式碼

• 在getAudioSrc內部，主要的作用就是，更新了一下新的src

globalCourseAudioListManager.addAudioSrc(res.items[0]); 複製程式碼

## 現在在courseAudioListManager內部

    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;
        }
      });
    }, 複製程式碼

3. 其他一些經驗

• 如果程式碼過長，不要用三目運算子，很難讀。
• 音訊播放可能出現錯誤，需要用onError加以捕獲。
• 最後，歡迎留言~！