前言:以前作的初版播放器功能作出來了,但發現結構不是很優雅以及後端api很不穩定,因此進行了一次小升級。這次升級 功能更全,體驗更好,api更穩定,技術棧更多,收穫也更多?。前端
[舒適提示:pc瀏覽f12手機模式最佳,手機建議wifi下訪問]vue
歡迎你們的star和fork?~ios
首頁git
輪播es6
個性推薦[流行、古典、輕音樂、流行]github
歌曲操做(動畫)vue-router
底部播放控件vuex
播放、暫停、下一曲axios
實時播放進度條後端
播放頁
上一曲、播放、暫停、下一曲
播放進度條(弧形進度條)
歌詞滾動、歌詞高亮
播放列表
播放歌曲高亮
切歌(單擊切歌)
刪歌(點擊右側小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等待,提高用戶體驗。
添加播放所有,避免一個一個添加。
本地緩存播放列表與清空。
MagicMusic還在不斷努力的改進,以爲還行的能夠點個star,你的star是我繼續開源創做的動力,謝謝!!!固然有建議能夠在issues裏提。
項目地址: https://github.com/hzzly/MagicMusic
歡迎你們的star啦~
本人大三,求一個前端實習:簡歷
文章首發於hzzly技術成長日誌