用javascript和html5作一個音樂播放器，附帶源碼

效果圖：

實現的功能

一、首頁

二、底部播放控件

三、播放頁面

四、播放列表

五、排行榜

六、音樂搜索

輸入搜索關鍵詞，點擊放大鏡圖標

七、側邊欄

目錄結構

 

開發心得與總結

一、輪播圖

首先感謝做者ShanaMaid/vue-image-scroll開源的代碼，我把代碼copy下來本身進行了一點修改(沒有手指滑動效果)，由於這是移動端，少不了的手指滑動切換，因此添加了vue-touch(偷偷告訴你，vue-touch的next分支仍是支持vue2.0的)。

地址：https://github.com/hzzly/MagicMusic/blob/master/src/components/banner.vue

二、歌曲操做(喜歡，分享，加入播放列表)動畫、播放列表展開與刪除歌曲動畫Vue提供了transition的封裝組件，在下列情形中，能夠給任何元素和組件添加 entering/leaving 過渡

• 條件渲染 （使用 v-if）

• 條件展現 （使用 v-show）

• 動態組件

• 組件根節點

transition-group一組過分動畫，這裏有個小坑的，以前看官網列表過渡的栗子，給每一項設置惟一的key值，通常都會用index。因此在作的時候就把index傳給key，結果過渡總是不對，後來換成對應的item就正常了(生無可戀臉)。

三、直線進度條、弧形進度條

西班牙建築大師曾說過：「直線屬於人類，曲線則歸於上帝」。在這裏我大膽的使用了弧形來做爲進度條，(幾大熱門音樂APP貌似尚未弧形進度條)。

這裏我用到了Vue的綁定內聯樣式

四、本地存儲

將一些數據緩存到localStorage，能夠減小Http請求，從而優化頁面加載時間。

在這個項目中首頁歌曲列表以及搜索歷史用到了本地緩存，拿搜索歷史來舉慄：

五、圖片懶加載

使用了vue-lazyload插件

用法：

六、歌詞滾動與高亮

由於api提供的歌詞包括時間，如：

[03:57.280]原諒我這一輩子不羈放縱愛自由

因此首先要進行字符串切割：

而後在播放的監聽事件中與播放的當前作對比：

到這就ok了

七、VUEX狀態管理

推薦官方調試工具 devtools extension

以前看到好多人寫的vuex，把整個項目的數據放到了一個state裏，致使應用的全部狀態集中到一個很大的對象。可是，當應用變得很大時，store 對象會變得臃腫不堪。

因此我建議(我的看法，輕噴)：將 store 分割到模塊（module）。每一個模塊擁有本身的 state、mutation、action、getters。這樣方便管理與後期的維護。

車已到站✌️。

不知不覺寫了這麼多，老鐵們湊合這看吧，以爲還行的能夠點贊，須要完整代碼練習的加羣：453833554已經上傳到羣文件。