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

Yangfan發表於2018-10-28
HTMLCSSJavaScript網頁播放器

app-poster

前言

沒有使用任何框架，只是想用最簡單純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

music-163

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

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

首先先的將它“畫”出來（HTML+CSS）

我仔細看了下網易雲音樂PC端的佈局，大致分為四部分，四個模組

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

無圖不真相

pc-music
pc-music

然後呢，寫頁面邏輯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唄^_^

相關文章