午夜看片福利,日韩美女一区二区,日韩欧美在线视频

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加以捕獲。
最后，歡迎留言~！

小程序模板網(wǎng)

微信小程序音頻功能開發(fā)實(cai)踐(keng)

1. 需求分析與開發(fā)方案

1.1 需求簡介

1.2 開發(fā)分析

1.2.1 backgroundAudioManager簡介

1.2.2 播放控件

1.2.3 開發(fā)方案確定

2. 功能實現(xiàn)

2.1 Slider控件模擬進度

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

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

2.2 backgroundAudioManager相關(guān)需求

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

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

2.3 courseAudioListManager相關(guān)需求

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

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

產(chǎn)品

服務(wù)

幫助

關(guān)于

小程序模板網(wǎng)

微信小程序音頻功能開發(fā)實(cai)踐(keng)

1. 需求分析與開發(fā)方案

1.1 需求簡介

1.2 開發(fā)分析

1.2.1 backgroundAudioManager簡介

1.2.2 播放控件

1.2.3 開發(fā)方案確定

2. 功能實現(xiàn)

2.1 Slider控件模擬進度

2.1.1 需求一：控件隨著音頻播放，自動更新

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

2.2 backgroundAudioManager相關(guān)需求

2.2.1 需求三：繞過onCanPlay，提醒用戶音頻在加載

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

2.3 courseAudioListManager相關(guān)需求

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

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

產(chǎn)品

服務(wù)

幫助

關(guān)于

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

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

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