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

摘要： 鄙人野生前端一隻，gis專業，自學前端已經一年多了，為什麼要寫個音樂播放器呢？原因有兩個： 本人是網易雲音樂的重度使用者，近乎瘋狂 自學了前端這麼久了，也是想檢驗下自己的成果吧 本播放器要幹什麼呢 簡單的 播放 暫停 那當然不能少 切換歌曲，...

鄙人野生前端一隻，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 ofollow,noindex">music.163.com/api/playlis…

id 歌單id
複製程式碼

因為涉及到跨域問題。暫時我前臺這邊又沒有辦法跨域，所以參考了網上的程式碼， 寫個PHP做代理 （2018-09-14更新：現在程式碼已改為Nodejs做代理服務），這樣就不存在跨域問題了。 獲取到歌單資料後，重新渲染下DOM

搜尋歌曲

s搜尋內容
type搜尋型別
limit搜尋返回結果數
複製程式碼