DIY一個本身的音樂播放器2.0來襲

前言：以前作的初版播放器功能作出來了，但發現結構不是很優雅以及後端api很不穩定，因此進行了一次小升級。這次升級 功能更全，體驗更好，api更穩定，技術棧更多，收穫也更多?。

[舒適提示：pc瀏覽f12手機模式最佳,手機建議wifi下訪問]

預覽地址： http://hzzly.net/magic-music

Github地址： https://github.com/hzzly/Magi...

歡迎你們的star和fork?~

實現的功能

• 首頁

  • 輪播

  • 個性推薦[流行、古典、輕音樂、流行]

  • 歌曲操做（動畫）

• 底部播放控件

  • 播放、暫停、下一曲

  • 實時播放進度條

• 播放頁

  • 上一曲、播放、暫停、下一曲

  • 播放進度條（弧形進度條）

  • 歌詞滾動、歌詞高亮

• 播放列表

  • 播放歌曲高亮

  • 切歌(單擊切歌)

  • 刪歌(點擊右側小X)

  • 清空播放列表

  • 本地緩存播放列表

• 排行榜

  • 排行榜列表

  • 排行榜裏的歌曲(單擊播放)、所有播放

• 音樂搜索

  • 搜索單曲、歌手

  • 搜索歷史記錄

• 側邊欄

未實現的功能

• 喜歡、分享、下載、切換播放模式

預覽

更多預覽?更多

技術棧

一、Vue全家桶(vue二、vue-router、vuex) 快速開發SPA神器
二、Axios vue做者推薦的數據請求方案
三、ES6 全面過分es6的寫法 趨勢
四、Webpack2 腳手架已經配置好了，超貼心
五、Promise 把請求封裝在promise中，方便的可使用.then回調
六、flex佈局 對於移動端能夠放心大膽的使用
七、移動端屏幕適配 採用手淘的flexible+rem方案
八、本地存儲(sessionStorage、localStorage) 避免重複資源請求，快速讀取
九、圖片懶加載 vue-lazyload 提高用戶體驗

本次更新日誌

• 後端api採用pm2來部署，防止斷開後數據沒法請求的尷尬。

• 把監聽audio加載完數據事件統一管理起來，避免重複監聽，優化代碼結構。

• 更新axios請求，讓請求更加優美。

• 修改播放頁面，優化用戶體驗。

• 添加加載音樂loading等待，提高用戶體驗。

• 添加播放所有，避免一個一個添加。

• 本地緩存播放列表與清空。

DIY一個本身的音樂播放器1.0

後記

MagicMusic還在不斷努力的改進，以爲還行的能夠點個star，你的star是我繼續開源創做的動力，謝謝！！！固然有建議能夠在issues裏提。
項目地址： https://github.com/hzzly/MagicMusic
歡迎你們的star啦~

求實習

本人大三，求一個前端實習：簡歷

文章首發於hzzly技術成長日誌