vue 全家桶實現簡易版網易雲音樂播放器

開發目的

由於沒有嘗試過WebApp的開發，這算是我作的的第一個移動端頁面吧，也爲了更加熟練的運用vue以及vue全家桶進行開發，提高本身模塊化開發的水平，嘗試讓本身的代碼變得更整潔。

第一次寫文章，有點激動！

本項目使用了vue全家桶，以及better-scroll，Scss等實現了一款（po）簡（lan）易的移動端音樂播放器，UI參考了IOS端的網易雲音樂APP。

• 項目演示地址 網易雲WebApp ,因爲租不起服務器，因此這個連接會跟隨我下班的腳步逐漸消失~~。
• tips：因爲目前線上後臺使用後臺代碼維護者的服務器，代碼並非最新的，其中歌詞接口掛了，能夠自行去NeteaseCloudMusicApi 下載代碼並在本地運行，有些接口參數也變了
• 請使用chrome的手機調試模式預覽，如不能滾動請刷新頁面~~
• 項目利用空餘時間斷斷續續寫了快兩週才寫完的，做爲初入前端不到一年的小白，正在努力提高本身的coding水平中，項目的功能還在完善中，很是但願大神們能給好的建議，項目確定有許多須要優化的地方，以及一些bug（因爲並無在許多手機上測試過，只在本身手機和朋友手機上簡單測試）。

源碼地址：vue-cli3 WebApp

界面預覽

技術棧

• vue：MVVM框架，整個項目的基礎
• vue-cli：快速初始化搭建項目
• vuex：狀態管理工具，用於對音樂播放狀態、播放列表、播放模式等進行控制管理
• vue-router：vue自帶的路由系統，用於單頁應用的頁面快速切換
• vue-lazyload：用於圖片資源的懶加載
• Scss：css 預編譯處理器
• better-scroll：頁面滾動控制，可以實現大多數頁面滾動需求，如輪播圖、頁面上拉加載、下拉刷新、頁面滾動動等
• lyric-parser：用於對歌詞進行解析
• node.js：後端使用的是 NeteaseCloudMusicApi 提供的接口
• vue-aixos：用於請求後端數據

目前實現的功能

主頁面-推薦頁

1. 主頁面主要分爲上部分banner圖，導航菜單，中間部分推薦歌單列表，以及底部的導航欄

2. banner圖主要使用了better-scroll插件，進行了單獨封裝

3. 推薦歌單佈局使用了flex佈局，更好的適配移動端，推薦歌單封面圖片結合vue-lazyload實現圖片的懶加載，避免了一次加載過多數據而致使性能問題，以及節省流量

4. 底部導航欄，目前只實現了發現頁。。。

每日推薦頁面

1. 歌曲列表進行了單獨封裝，用於多頁面複用
2. 因爲未實現登陸功能，每日推薦接口須要用戶參數信息，所以暫時使用固定數據

歌單，排行榜頁面

1. 與首頁的推薦頁面相同，歌單列表與推薦頁歌單列表組件實現了複用，頁面展現了各個歌單分類
2. 排行榜頁面與歌單列表頁面相似，因爲排列方式不一樣以及多了一些文字描述，並無和歌單列表組件實現複用，點擊對應的歌單根據歌單id，進入對應的歌單詳情頁獲取歌單全部歌曲

歌單列表頁

1. 根據歌單id獲取歌單列表以及封面等數據
2. 點擊播放所有按鈕將全部歌曲加入播放隊列中，當播放模式爲隨機播放時，隨機開始播放歌曲，若是爲順序播放，則從第一首歌曲開始播放。
3. 點擊歌曲列表其中一首歌曲，能夠開始播放這首歌曲並將其餘歌曲加入播放列表

歌曲播放頁面

1. 當歌曲正在播放時，歌曲封面圖片開始旋轉，利用animation屬性，實現無限旋轉動畫，當暫停歌曲時暫停動畫

transform: rotate(360deg); // 旋轉360度
animation: rotation 8s linear infinite; // 無限旋轉
複製代碼

animation-play-state: paused; // 實現歌曲暫停，動畫暫停
複製代碼

2. 點擊播放頁面上半部分，能夠切換歌詞頁，歌詞的解析使用lyric-parser插件，將歌詞數據解析後可獲得歌詞以及對應的時間戳，其內部經過定時器來實現歌詞與歌曲的同步（使用後不知道爲何有些歌曲與歌詞並不能同步，目前未解決，本人以爲歌曲的歌詞應該和歌曲播放進度進行關聯）

播放器核心播放功能

1. 音樂的播放使用H5的 audio 標籤，播放歌曲的基本實現--經過 watch 監聽當前播放歌曲，當播放歌曲改變時，給 audio 設置新的 url 歌曲便能實現切換
2. audio提供了許多事件，其中oncanplay事件能夠判斷音樂文件是否就緒，在就緒後才能繼續以後的一些操做。timeupdate事件返回歌曲播放進度時間，提供咱們顯示歌曲播放進度。ended事件在當前歌曲播放結束後觸發，使用該事件觸發播放下一首歌曲
3. 播放進度條單獨封裝成組件，該組件接收當前播放時間以及歌曲總時長兩個參數，經過當前播放時間以及總時長計算百分比，經過watch當前播放時間，實時改變播放進度，設置進度條的位置以及對應樣式屬性
4. 一樣的，給進度條圓點添加touch事件，計算拖動的水平距離百分比，設置當前播放進度
5. 歌曲隨機播放功能，隨機取0到播放列表歌曲數的數值，設置爲當前播放歌曲索引，實現歌曲的隨機播放；當歌曲爲循環播放模式時，歌曲播放結束後重置當前播放時間，不改變當前歌曲索引

播放列表

1. 展現全部播放隊列中的歌曲，點擊歌曲名字切換播放對應歌曲
2. 實現打開播放列表自動定位到當前播放歌曲並滑動到第一行
3. 刪除播放列表中的歌曲，當刪除正在播放的歌曲時，自動切換至下一首歌曲開始播放，當刪除全部歌曲時，中止播放歌曲並跳轉至首頁
4. 播放列表一樣能控制歌曲播放模式，與播放頁面同步

最後

感謝

• 感謝 Binaryify 對接口文檔 NeteaseCloudMusicApi 的不斷維護與更新。

接下來要作的事

• 實現用戶登陸功能
• 儘可能完善各頁面
• 優化代碼
• 大佬們能給個star鼓勵下麼 Star