HTML+CSS+JAVASCRIPT 高仿低配網頁版網易雲音樂播放器

前言

沒有使用任何框架，只是想用最簡單純js的代碼實現下

• 前臺: Javascript+jQuery
• 後臺: php/nodejs（php是參考網上的例子寫的，nodejs代碼是在php的基礎上從新寫的）
• 還有她的姊妹篇（網易雲音樂移動端），請查看這裏 github.com/Yangfan2016…

寫在前頭的話

鄙人野生前端一隻，gis專業，自學前端已經一年多了，爲何要寫個音樂播放器呢？緣由有兩個：

1. 本人是網易雲音樂的重度用戶，近乎瘋狂
2. 自學了前端這麼久了，也是想檢驗下本身的成果吧

本播放器要幹什麼呢

1. 簡單的 播放 暫停 那固然不能少
2. 切換歌曲，上一首 、 下一首 也得有
3. 進度條 ，這個有點複雜，原本想用 input[range] 寫，可是樣式很差改，本身用多個div代替吧
4. 進度條都有了，音量調節 不能少吧，畢竟他倆UI樣式差很少，照貓畫虎唄
5. 再加一個 靜音功能 ，省的音樂太大聲，鄰居找茬哦(⊙o⊙)

本播放器還能幹什麼呢

1. 歌詞滾動 有木有
2. 搜索單曲
3. 指定歌單播放 這個須要知道歌單的 id 不是很好找，（得上網易雲音樂官網登陸本身的帳號，找到歌單，點進去，擡頭看URL 裏最後的 id 參數）暫時用的是「我喜歡的音樂」（歌單）的id

那閒話很少說，開整吧（原諒一個理科生的表達能力）

我模仿的是網易雲音樂的PC端，所用到的技術都是前端的基本技術 HTML、CSS、JAVASCRIPT
因爲我是自學的，沒有那麼多規矩，我這我的看到是我感興趣的，我立馬就會去作，這個播放器也不例外。

首先先的將它「畫」出來（HTML+CSS）

我仔細看了下網易雲音樂PC端的佈局，大體分爲四部分，四個模塊

1. 頂部菜單（頂部導航，叫什麼名無所謂了）
2. 底部播放條 這是播放器的核心
3. 主體內容在右邊 歌單的詳細信息和歌曲列表
4. 左側是導航和歌單組
5. 左下角還有一個小窗，顯示正在播放歌曲的簡要信息，點擊小窗 展開一個歌曲詳情頁

無圖不真相

而後呢，寫頁面邏輯JavaScript

播放器

1. 播放器的控制按鈕 播放(暫停)按鈕，這個能夠經過play()和pause()方法實現
2. 進度條 這個經過監聽timeupdate事件，實施更新當前播放位置， 經過監聽鼠標移動事件，改變進度條的長度
3. 靜音按鈕，能夠經過audio.muted=true實現

初始化歌單列表

網易雲音樂獲取歌單的API music.163.com/api/playlis…

id 歌單id
複製代碼

由於涉及到跨域問題。暫時我前臺這邊又沒有辦法跨域，因此參考了網上的代碼，寫個PHP作代理 （2018-09-14更新：如今代碼已改成Nodejs作代理服務），這樣就不存在跨域問題了。 獲取到歌單數據後，從新渲染下DOM

搜索歌曲

網易雲音樂獲取歌曲的API
s.music.163.com/search/get?…

s           搜索內容
type        搜索類型
limit       搜索返回結果數
複製代碼

歌曲詳情頁

主要是歌詞和歌詞滾動

網易雲音樂獲取歌詞API
music.163.com/api/song/ly…

id 歌曲id
複製代碼

歌詞滾動，先把獲取到的歌詞數據分割成時間點和歌詞兩部分，將這兩部分存入dataset中， 經過監聽timeupdate事件，判斷和當前播放時間相近的歌詞，記錄它的getBoundingClient()的top值，將滾動條設置到指定位置 例如：ele.srcollTop=100;

先寫到這裏吧

總結能力太差了，原諒理科生的無奈

附錄

完整源碼，點擊查看
後臺代碼，點擊查看

此文源自個人博客

大佬，給個start唄^_^