H5 Audio ES6版系列教程之一

再也不用擔心面試問到h5用到哪些新元素了，大神如我小弟用js原生實現了抄了 audio，video還會遠嗎?

本專案基於 es6+scss+webpack 開發的原生 js 版 h5audio，此次分享的目的是讓前端對 h5 的 audio 有更深的了解，同時對現代前端技術也有個大致的了解，最終可以基於vue或react開發乙個 h5 版的網易**，qq **...

由於工作中有音訊方面的需求，所以該專案也是自己作為迭代的記錄。意味著，這將是乙個系列教程。

預覽位址，訪問可能會比較慢。 github位址

實現原生音訊無外乎兩個部分

首先要先了解aduio的屬性和方法。

關於 audio 元素的介紹，推薦 mdn

首先原生 audio 元素是必不可少的，我們也可以直接新增controls屬性來使用瀏覽器實現的 ui。

id="myaudio"
src="/static/test.***"
controls>
audio>
複製**

基礎的 dom 結構應該包括：

進度條聲音控制

總體結構建議使用語義化元素，樣式類名命名參考bem。音訊建議考慮視覺障礙者，可引入無障礙

這邊簡單講一下進度條的實現。通過input型別中range和progress可以大大降低 dom 結構複雜度及提高語義化。

其中涉及到改瀏覽器原生樣式讀者可自行谷歌。也可以參考本專案原始碼

class="myaudio__controls">
type="button"
data-myaudio="play">
button>
class="myaudio__progress">
class="myaudio__progress--seek"
type="range"
min="0"
max="100"
step="0.1"
value="0"
data-myaudio="seek">
class="myaudio__progress--played"
max="100"
value="0"
role="presentation">
progress>
class="myaudio__progress--buffer"
max="100"
value="20.43">
progress>
span>
class="myaudio__time--current">00:00span>
class="myaudio__time--duration">00:20span>
type="button"
data-myaudio="mute">
button>
class="myaudio__volume">
class="myaudio__volume--input"
type="range"
min="0"
max="10"
value="10"
data-myaudio="volume">
class="myaudio__volume--display"
max="10"
value="10"
role="presentation">
progress>
span>
div>
複製**

事件與 dom 元素密不可分，而音訊主要分兩個方向去監聽事件。使用者自定義的 dom 元素事件監聽，audio 原生事件監聽。涉及的知識點是addeventlistenter和自定義事件。

本次 audio 外掛程式基於 es6 的class開發。最終可以直接通過例項化來生成乙個audio物件

我們先從配置檔案來大致了解下開發乙個 audio 所用到的配置項。

export default , autoplay: false, // 聲音控制相關 volumemin: 0, volumemax: 10, volume: 10, html: '', // debugger 相關 logprefix: '日誌：', debug: true, // 整體思路是通過控制全域性狀態類名，來設定對應樣式 classes: , // 狀態儲存相關 storage: , // 選擇器相關 selectors: , labels: '[data-myaudio]', buttons: , volume: , progress: , currenttime: '.myaudio__time--current', duration: '.myaudio__time--duration' },// 主要功能涉及以下 5 個事件 // 事件相關 listeners:

};複製**

從配置檔案可以大概了解總體思路。下次分享將從原始碼解析的角度進一步講解 audio 原生實現。

在前端的世界裡，所碼即所得。當我想要了解乙個專案的時候，我會直接執行看效果。

接下來，假設你已經具備一定的前端工程化開發經驗。

cd ~/desktop git clone cd myaudio npm i npm run dev

複製**

感謝 plyr，可以說本教程是對它的一次原始碼解析。

H5 Audio ES6版系列教程之一

C Primer Plus 第6版總結複習（5）

「H5結婚請柬電子版」製作攻略

H5活動產品設計指南基礎版

H5 Audio ES6版 系列教程之一

C Primer Plus 第6版 總結複習（5）

「H5結婚請柬電子版」製作攻略

H5活動產品設計指南基礎版

相關推薦

H5 Audio ES6版系列教程之一

C Primer Plus 第6版總結複習（5）