html5實如今線響應式音樂播放器

大概很早的時候就有想法作一個音樂播放器玩玩，之前可能還考慮過作APP，大一的時候第一個html的靜態頁面也是作的音樂網站，想一想，大概小時候比較喜歡音樂吧。然而，如今入了前端大坑，就用h5作一個耍耍好了。功能很少，UI不美，But，練習了html5中audio及其API的使用。歡迎吐槽~

功能思路分析

用了這麼多年的音樂播放軟件，目前已經是網易雲音樂的重度用戶。
一個基本的音樂播放器基礎功能有：播放、暫停、歌曲切換。
用戶體驗基礎功能：歌曲跳躍播放、音量調整、歌曲單曲或列表循環。
當了解這些以後，再瞅一眼audio的api，簡直了，基本上都能實現，開作。

頁面實現

採用了比較喜歡的深藍漸變背景加活力黃搭配，界面沒啥好說的，蘿蔔白菜，各有所愛。
用css3媒體查詢實現響應式，刪除沒必要要的區域。

js實現

1.設置默認屬性

默認不自動播放audio.autoplay = false;
默認不單曲循環audio.loop = false;
初始化音量audio.volume = 0.5;
默認不自動緩衝加載audio.autobuffer = false;

2.基本功能實現

這裏不提了，有想了解的能夠去github(地址)看源碼。
3.細節實現

①利用定時器實時顯示歌曲播放時間，利用百分比來動態改變進度條的長度。

②利用audio.readyState來設置緩衝進度，用css3來實現平滑改變

③可點擊歌曲進度條任意位置實現跳轉播放，音量同理
④實現靜音，單曲循環和列表循環

在線音樂實現

此次採用的是網易雲音樂的API來進行在線音樂的實現。此處參考了小青年的文章html5+ XMLHttpRequest 與mui ajax用法詳解。
利用事件委託，爲動態加載的結果綁定監聽事件。將搜到的資源數據加載到audio中去，而後播放在線資源。
原本想加入localStorage存儲播放列表的，對於體驗還有所考慮，畢竟只是個玩兒的東西，因此保留想法了，沒有加入。

上結果

不得不認可，總結能力真的有夠差，直接上結果吧：(http://fehey.com/hey-Audio/)
喜歡的能夠去github看源碼，有什麼改進，歡迎留言（star也不介意哦?）~

我的博客：(http://fehey.com/)