資訊專欄INFORMATION COLUMN
摘要：個(gè)人網(wǎng)站最近剛寫了一個(gè)手機(jī)在線播放的電影站緣由公司項(xiàng)目使用開發(fā)混合式，用到了官方提供的原生音頻播放模塊來做單點(diǎn)音頻播放功能。首頁和播放頁始終進(jìn)行暫停事件監(jiān)聽。
關(guān)于作者
程序開發(fā)人員，不拘泥于語言與技術(shù)，目前主要從事PHP和前端開發(fā)，使用Laravel和VueJs，App端使用Apicloud混合式開發(fā)。合適和夠用是永不停息的追求。
個(gè)人網(wǎng)站：https://www.linganmin.cn
最近剛寫了一個(gè)手機(jī)在線播放的H5電影站：http://www.ifilm.ltd
緣由：公司項(xiàng)目使用APIcloud開發(fā)混合式app，用到了APIcloud官方提供的audio原生音頻播放模塊來做單點(diǎn)音頻播放功能。單點(diǎn)的意思是所有播放狀態(tài)交由首頁處理，播放頁面更改對應(yīng)播放的item狀態(tài)即可。因個(gè)人感覺凌亂，在老大指引下使用事件和事件監(jiān)聽完成之，遂總結(jié)記錄之。
附上完成后的效果圖:
備注：因需要改變播放頁的狀態(tài)，在播放頁的監(jiān)聽器中需要傳遞當(dāng)前頁面的數(shù)據(jù)，并在監(jiān)聽器中進(jìn)行遍歷，判斷，修改。不然無法完成修改當(dāng)前播放狀態(tài)操作。
給當(dāng)前頁面展示的post和相關(guān)post使用Vue增加播放所需的狀態(tài)，進(jìn)度等屬性
點(diǎn)擊播放，判斷當(dāng)前post是否正在播放，若是則執(zhí)行暫停事件，若不是則執(zhí)行播放事件
首頁（index.html）始終進(jìn)行播放事件監(jiān)聽。
當(dāng)捕獲到播放事件，開始判斷當(dāng)前將要播放的和當(dāng)前播放的是不是同一個(gè)post，如果不是則將執(zhí)行停止播放事件去停掉當(dāng)前正在播放的post，然后開始播放將要播放的post。
播放語音的回調(diào)函數(shù)中執(zhí)行設(shè)置播放狀態(tài)事件，并將播放過程獲取到的音頻長度。當(dāng)前播放位置等參數(shù)傳遞給該事件，供該事件監(jiān)聽器使用。
首頁和播放頁始終進(jìn)行暫停事件監(jiān)聽 ?！緝蓚€(gè)監(jiān)聽器】
當(dāng)首頁捕獲到暫停事件，則進(jìn)行音頻暫停操作(audio.pause);
當(dāng)播放頁捕獲到暫停事件，則將當(dāng)前正在播放的post的狀態(tài)改為暫停
首頁和播放頁始終進(jìn)行停止播放事件監(jiān)聽?！緝蓚€(gè)監(jiān)聽器】
當(dāng)首頁捕獲到停止播放事件，則進(jìn)行音頻停止播放操作(audio.stop);
當(dāng)播放頁捕獲到停止播放事件，則將當(dāng)前正在播放的post狀態(tài)改為未播放，播放進(jìn)度等置空
播放頁始終進(jìn)行設(shè)置播放狀態(tài)事件監(jiān)聽。
當(dāng)播放頁捕獲到設(shè)置播放狀態(tài)事件，則獲取事件傳遞的數(shù)據(jù)，實(shí)時(shí)改變播放頁面的狀態(tài)
設(shè)置播放進(jìn)度（通過拖動播放進(jìn)度條）事件由當(dāng)前播放頁觸發(fā)，出發(fā)后將progress的值傳遞到首頁的設(shè)置播放進(jìn)度監(jiān)聽器使用，通過該值設(shè)置播放位置
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83682.html
摘要：本文出自官方論壇封裝了視頻播放功能支持音頻播放。本模塊封裝了兩套播放方案一，通過調(diào)用接口，直接打開一個(gè)自帶默認(rèn)播放界面的播放器二，通過接口，打開一個(gè)純播放器界面，再配合自定義完整的播放頁面，通過等接口控制播放操作。 本文出自APICloud官方論壇 vPlayer iOS封裝了AVPlayer視頻播放功能（支持音頻播放）。iOS 平臺上支持的視頻文件格式有：WMV，AVI，MKV，RM...
摘要：模塊化總結(jié)最近重新復(fù)習(xí)的模塊化的相關(guān)知識，總結(jié)一下，僅供自己理解和大家參考。模塊化的優(yōu)點(diǎn)可維護(hù)性根據(jù)定義，每個(gè)模塊都是獨(dú)立的。良好設(shè)計(jì)的模塊會盡量與外部的代碼撇清關(guān)系，以便于獨(dú)立對其進(jìn)行改進(jìn)和維護(hù)。 模塊化總結(jié) 最近重新復(fù)習(xí)的模塊化的相關(guān)知識，總結(jié)一下，僅供自己理解和大家參考。 模塊化的優(yōu)點(diǎn) 可維護(hù)性：根據(jù)定義，每個(gè)模塊都是獨(dú)立的。良好設(shè)計(jì)的模塊會盡量與外部的代碼撇清關(guān)系，以便于獨(dú)立...
閱讀 2683·2023-04-25 18:10
閱讀 1624·2019-08-30 15:53
閱讀 2826·2019-08-30 13:10
閱讀 3235·2019-08-29 18:40
閱讀 1140·2019-08-23 18:31
閱讀 1213·2019-08-23 16:49
閱讀 3413·2019-08-23 16:07
閱讀 888·2019-08-23 15:27
