沒有使用任何框架,只是想用最簡單純js的代碼實現下php
鄙人野生前端一隻,gis專業,自學前端已經一年多了,爲何要寫個音樂播放器呢?緣由有兩個:前端
我模仿的是網易雲音樂的PC端,所用到的技術都是前端的基本技術 HTML、CSS、JAVASCRIPT
因爲我是自學的,沒有那麼多規矩,我這我的看到是我感興趣的,我立馬就會去作,這個播放器也不例外。node
首先先的將它「畫」出來(HTML+CSS)
我仔細看了下網易雲音樂PC端的佈局,大體分爲四部分,四個模塊git
無圖不真相
github
而後呢,寫頁面邏輯JavaScript
播放(暫停)按鈕,這個能夠經過 play()
和 pause()
方法實現web
這個經過監聽timeupdate
事件,實施更新當前播放位置,
經過監聽鼠標移動事件,改變進度條的長度api
audio.muted=true
實現網易雲音樂獲取歌單的API
http://music.163.com/api/play...[id]跨域
id 歌單id
由於涉及到跨域問題。暫時我前臺這邊又沒有辦法跨域,因此參考了網上的代碼,寫個PHP作代理 (2018-09-14更新:如今代碼已改成Nodejs作代理服務),這樣就不存在跨域問題了。
獲取到歌單數據後,從新渲染下DOMapp
網易雲音樂獲取歌曲的API
http://s.music.163.com/search...[songname]&type=1&limit=10框架
s 搜索內容 type 搜索類型 limit 搜索返回結果數
主要是歌詞和歌詞滾動
網易雲音樂獲取歌詞API
http://music.163.com/api/song...[id]
id 歌曲id
歌詞滾動,先把獲取到的歌詞數據分割成時間點和歌詞兩部分,將這兩部分存入dataset中,
經過監聽timeupdate事件,判斷和當前播放時間相近的歌詞,記錄它的getBoundingClient()的top值,將滾動條設置到指定位置 例如:ele.srcollTop=100;
總結能力太差了,原諒理科生的無奈
此文源自個人博客