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

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

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

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

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

歡迎你們的star和fork?~ios

實現的功能

  • 首頁git

    • 輪播es6

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

    • 歌曲操做(動畫)vue-router

  • 底部播放控件vuex

    • 播放、暫停、下一曲axios

    • 實時播放進度條後端

  • 播放頁

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

    • 播放進度條(弧形進度條)

    • 歌詞滾動、歌詞高亮

  • 播放列表

    • 播放歌曲高亮

    • 切歌(單擊切歌)

    • 刪歌(點擊右側小X)

    • 清空播放列表

    • 本地緩存播放列表

  • 排行榜

    • 排行榜列表

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

  • 音樂搜索

    • 搜索單曲、歌手

    • 搜索歷史記錄

  • 側邊欄

未實現的功能

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

預覽

http://hzzly.net/magic-music/screenshots/music.gif

更多預覽?更多

技術棧

一、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技術成長日誌

相關文章
相關標籤/搜索