前言
沒有使用任何框架试幽，只是想用最簡單純js的代碼實現(xiàn)下
- 前臺: Javascript+jQuery
- 后臺: php/nodejs（php是參考網(wǎng)上的例子寫的不脯，nodejs代碼是在php的基礎(chǔ)上重新寫的）
- 還有她的姊妹篇（網(wǎng)易云音樂移動端），請查看這里 https://github.com/Yangfan2016/cloud-music-mobile#cloud-music-mobile
寫在前頭的話
鄙人野生前端一只，gis專業(yè)，自學前端已經(jīng)一年多了，為什么要寫個音樂播放器呢酥泛？原因有兩個：
- 本人是網(wǎng)易云音樂的重度用戶，近乎瘋狂
- 自學了前端這么久了嫌拣，也是想檢驗下自己的成果吧
本播放器要干什么呢
- 簡單的 播放 暫停 那當然不能少
- 切換歌曲柔袁，上一首 、 下一首 也得有
- 進度條 异逐，這個有點復雜捶索，本來想用 input[range] 寫，但是樣式不好改灰瞻，自己用多個div代替吧
- 進度條都有了腥例，音量調(diào)節(jié) 不能少吧辅甥，畢竟他倆UI樣式差不多，照貓畫虎唄
- 再加一個 靜音功能 燎竖，省的音樂太大聲璃弄，鄰居找茬哦(⊙o⊙)
本播放器還能干什么呢
- 歌詞滾動 有木有
- 搜索單曲
- 指定歌單播放 這個需要知道歌單的 id 不是很好找，（得上網(wǎng)易云音樂官網(wǎng)登錄自己的賬號构回，找到歌單夏块，點進去，抬頭看URL 里最后的 id 參數(shù)）暫時用的是“我喜歡的音樂”（歌單）的id
那閑話不多說纤掸，開整吧（原諒一個理科生的表達能力）
我模仿的是網(wǎng)易云音樂的PC端脐供，所用到的技術(shù)都是前端的基本技術(shù) HTML、CSS借跪、JAVASCRIPT
由于我是自學的政己，沒有那么多規(guī)矩，我這個人看到是我感興趣的垦梆，我立馬就會去做匹颤，這個播放器也不例外。
首先先的將它“畫”出來（HTML+CSS）
我仔細看了下網(wǎng)易云音樂PC端的布局托猩，大致分為四部分，四個模塊
- 頂部菜單（頂部導航辽慕，叫什么名無所謂了）
- 底部播放條 這是播放器的核心
- 主體內(nèi)容在右邊 歌單的詳細信息和歌曲列表
- 左側(cè)是導航和歌單組
- 左下角還有一個小窗京腥，顯示正在播放歌曲的簡要信息，點擊小窗 展開一個歌曲詳情頁
無圖不真相
然后呢溅蛉，寫頁面邏輯JavaScript
播放器
- 播放器的控制按鈕
播放(暫停)按鈕公浪，這個可以通過play()和pause()方法實現(xiàn) - 進度條
這個通過監(jiān)聽timeupdate事件，實施更新當前播放位置船侧，
通過監(jiān)聽鼠標移動事件欠气，改變進度條的長度 - 靜音按鈕，可以通過
audio.muted=true實現(xiàn)
初始化歌單列表
網(wǎng)易云音樂獲取歌單的API
http://music.163.com/api/playlist/detail?id=[id]
id 歌單id
因為涉及到跨域問題镜撩。暫時我前臺這邊又沒有辦法跨域预柒，所以參考了網(wǎng)上的代碼，寫個PHP做代理 （2018-09-14更新：現(xiàn)在代碼已改為Nodejs做代理服務(wù)）袁梗，這樣就不存在跨域問題了宜鸯。
獲取到歌單數(shù)據(jù)后，重新渲染下DOM
搜索歌曲
網(wǎng)易云音樂獲取歌曲的API
http://s.music.163.com/search/get?s=[songname]&type=1&limit=10
s 搜索內(nèi)容
type 搜索類型
limit 搜索返回結(jié)果數(shù)
歌曲詳情頁
主要是歌詞和歌詞滾動
網(wǎng)易云音樂獲取歌詞API
http://music.163.com/api/song/lyric?os=pc&id=[id]
id 歌曲id
歌詞滾動遮怜，先把獲取到的歌詞數(shù)據(jù)分割成時間點和歌詞兩部分淋袖，將這兩部分存入dataset中，
通過監(jiān)聽timeupdate事件锯梁，判斷和當前播放時間相近的歌詞即碗，記錄它的getBoundingClient()的top值焰情，將滾動條設(shè)置到指定位置 例如：ele.srcollTop=100;
先寫到這里吧
總結(jié)能力太差了，原諒理科生的無奈
附錄
此文源自我的博客
