DIY audio player - 自定義audio播放器樣式

以前也有用到audio，大概是生日賀卡，博客音樂，播放語音等場景。
場景也比較簡單，一個按鈕加一點動畫，再用上Audio的API，基本上就能夠搞定了。
哦，可能還會涉及到自動播放。【這裏】

DIY

以上場景，咱們通常都看不到Audio的樣式，基本都被隱藏了。由於對於新時代的咱們來講，暫時尚未get它的美。

可是，咱們要控制音頻的播放，直觀的看到時間進度等，那就須要展現這東西了。世上沒有醜audio，只有懶audio.

咱們給它化個妝就行了。淡妝，淡妝。

【code here】

資料

HTML/Element/audio

Media_events

Use

$(selector).initAudioPlayer();  // select 爲audio元素，能夠初始化多個

播放器樣式是寫在js代碼裏的，若是有須要，能夠把代碼摳出來放在CSS文件裏。而後再化成本身喜歡的樣子。或者你產品經理喜歡的樣子。

DEMO

來個demo，PC 打開爲移動端模式。

手機掃描二維碼：