基於apicloud原生模塊實現的凌亂的單點音頻播放凌亂功能總結

關於做者

程序開發人員，不拘泥於語言與技術，目前主要從事PHP和前端開發，使用Laravel和VueJs，App端使用Apicloud混合式開發。合適和夠用是永不停息的追求。

我的網站：https://www.linganmin.cn

最近剛寫了一個手機在線播放的H5電影站：http://www.ifilm.ltd

---

原因：公司項目使用APIcloud開發混合式app，用到了APIcloud官方提供的audio原生音頻播放模塊來作單點音頻播放功能。單點的意思是全部播放狀態交由首頁處理，播放頁面更改對應播放的item狀態便可。因我的感受凌亂，在老大指引下使用事件和事件監聽完成之，遂總結記錄之。

附上完成後的效果圖:

• 備註：因須要改變播放頁的狀態，在播放頁的監聽器中須要傳遞當前頁面的數據，並在監聽器中進行遍歷，判斷，修改。否則沒法完成修改當前播放狀態操做。

1. 給當前頁面展現的post和相關post使用Vue增長播放所需的狀態，進度等屬性

2. 點擊播放，判斷當前post是否正在播放，如果則執行暫停事件，若不是則執行播放事件

3. 首頁（index.html）始終進行播放事件監聽。
   當捕獲到播放事件，開始判斷當前將要播放的和當前播放的是否是同一個post，若是不是則將執行中止播放事件去停掉當前正在播放的post，而後開始播放將要播放的post。

播放語音的回調函數中執行設置播放狀態事件，並將播放過程獲取到的音頻長度。當前播放位置等參數傳遞給該事件，供該事件監聽器使用。

1. 首頁和播放頁始終進行暫停事件監聽 。【兩個監聽器】
   當首頁捕獲到暫停事件，則進行音頻暫停操做(audio.pause);

當播放頁捕獲到暫停事件，則將當前正在播放的post的狀態改成暫停

1. 首頁和播放頁始終進行中止播放事件監聽。【兩個監聽器】
   當首頁捕獲到中止播放事件，則進行音頻中止播放操做(audio.stop);

當播放頁捕獲到中止播放事件，則將當前正在播放的post狀態改成未播放，播放進度等置空

1. 播放頁始終進行設置播放狀態事件監聽。
   當播放頁捕獲到設置播放狀態事件，則獲取事件傳遞的數據，實時改變播放頁面的狀態

2. 設置播放進度（經過拖動播放進度條）事件由當前播放頁觸發，出發後將progress的值傳遞到首頁的設置播放進度監聽器使用，經過該值設置播放位置