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

shery 發布于2019-08-20 17:34 / 3347人閱讀

摘要：個人網站最近剛寫了一個手機在線播放的電影站緣由公司項目使用開發混合式，用到了官方提供的原生音頻播放模塊來做單點音頻播放功能。首頁和播放頁始終進行暫停事件監聽。

關于作者

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

個人網站：https://www.linganmin.cn

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

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

附上完成后的效果圖:

備注：因需要改變播放頁的狀態，在播放頁的監聽器中需要傳遞當前頁面的數據，并在監聽器中進行遍歷，判斷，修改。不然無法完成修改當前播放狀態操作。

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

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

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

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

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

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

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

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

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

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

GPU云服務器云服務器 js代碼凌亂 webrtc的音頻模塊基于webrtc的電話回聲消除的研究與實現 webrtc實現自己的音頻采集

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83682.html

你不知道的h5

摘要：目前，常用的模塊規范主要有兩種和。攔截全局請求一直接引入腳本攔截需要的回調或函數。深刻知道一個良好的命名規范的重要性，同時在項目中也會遇到一些命名的瓶頸。基于 Three.js 的超快的 3D 開發框架：Whitestorm.js Whitestorm.js 是一款基于 Three.js 超快的 Web 應用 3D 開發框架。它為普通的 Three.js 任務提供封裝、使搭建環境、...

IntMain 2019-08-21 17:57 評論0 收藏0
vPlayer 模塊Demo

摘要：本文出自官方論壇封裝了視頻播放功能支持音頻播放。本模塊封裝了兩套播放方案一，通過調用接口，直接打開一個自帶默認播放界面的播放器二，通過接口，打開一個純播放器界面，再配合自定義完整的播放頁面，通過等接口控制播放操作。本文出自APICloud官方論壇 vPlayer iOS封裝了AVPlayer視頻播放功能（支持音頻播放）。iOS 平臺上支持的視頻文件格式有：WMV，AVI，MKV，RM...

WrBug 2019-08-26 14:04 評論0 收藏0
模塊化

摘要：模塊化總結最近重新復習的模塊化的相關知識，總結一下，僅供自己理解和大家參考。模塊化的優點可維護性根據定義，每個模塊都是獨立的。良好設計的模塊會盡量與外部的代碼撇清關系，以便于獨立對其進行改進和維護。模塊化總結最近重新復習的模塊化的相關知識，總結一下，僅供自己理解和大家參考。模塊化的優點可維護性：根據定義，每個模塊都是獨立的。良好設計的模塊會盡量與外部的代碼撇清關系，以便于獨立...

?xiaoxiao, 2019-08-20 17:45 評論0 收藏0