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

標籤：分支   模組   監聽   輪播   建築   放大鏡   str   對比   pad   

：

實現的功能

1、首頁

2、底部播放控制項

3、播放頁面

4、播放清單

5、熱門排行榜

6、音樂搜尋

輸入搜尋關鍵詞，點擊放大鏡表徵圖

7、側邊欄

目錄結構 

開發心得與總結

1、輪播圖

首先感謝作者ShanaMaid/vue-image-scroll開源的代碼，我把代碼copy下來自己進行了一點修改(沒有手指滑動效果)，因為這是移動端，少不了的手指滑動切換，所以添加了vue-touch(偷偷告訴你，vue-touch的next分支還是支援vue2.0的)。

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

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

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

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

• 動態組件

• 組件根節點

transition-group一組過度動畫，這裡有個小坑的，之前看官網列表過渡的栗子，給每一項設定唯一的key值，一般都會用index。所以在做的時候就把index傳給key，結果過渡老是不對，後來換成對應的item就正常了(生無可戀臉)。

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

西班牙建築大師曾說過：“直線屬於人類，曲線則歸於上帝”。在這裡我大膽的使用了弧形來作為進度條，(幾大熱門音樂APP貌似還沒有弧形進度條)。

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

4、本機存放區

將一些資料緩衝到localStorage，可以減少Http請求，從而最佳化頁面載入時間。

在這個項目中首頁歌曲列表以及搜尋曆史用到了本機快取，拿搜尋曆史來舉栗：

5、圖片懶載入

使用了vue-lazyload外掛程式

用法：

6、歌詞滾動與高亮

因為api提供的歌詞包括時間，如：

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

所以首先要進行字串切割：

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

到這就ok了

7、VUEX狀態管理

推薦官方調試工具 devtools extension

之前看到好多人寫的vuex，把整個項目的資料放到了一個state裡，導致應用的所有狀態集中到一個很大的對象。但是，當應用變得很大時，store 對象會變得臃腫不堪。

所以我建議(個人見解，輕噴)：將 store 分割到模組（module）。每個模組擁有自己的 state、mutation、action、getters。這樣方便管理與後期的維護。

車已到站??。

不知不覺寫了這麼多，老鐵們湊合這看吧，覺得還行的可以點贊，需要完整代碼練習的加群：453833554已經上傳到群檔案。

 

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