資訊專欄INFORMATION COLUMN
摘要：高仿低配網(wǎng)頁版網(wǎng)易云音樂播放器前言沒有使用任何框架，只是想用最簡單純的代碼實(shí)現(xiàn)下前臺后臺是參考網(wǎng)上的例子寫的，代碼是在的基礎(chǔ)上重新寫的還有她的姊妹篇網(wǎng)易云音樂移動端，請查看這里寫在前頭的話鄙人野生前端一只，專業(yè)，自學(xué)前端已經(jīng)一年多了
HTML+CSS+JAVASCRIPT 高仿低配網(wǎng)頁版網(wǎng)易云音樂播放器 前言
沒有使用任何框架，只是想用最簡單純js的代碼實(shí)現(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è)，自學(xué)前端已經(jīng)一年多了，為什么要寫個(gè)音樂播放器呢？原因有兩個(gè)：
本人是網(wǎng)易云音樂的重度用戶，近乎瘋狂
自學(xué)了前端這么久了，也是想檢驗(yàn)下自己的成果吧
本播放器要干什么呢簡單的 播放 暫停 那當(dāng)然不能少
切換歌曲，上一首 、 下一首 也得有
進(jìn)度條 ，這個(gè)有點(diǎn)復(fù)雜，本來想用 input[range] 寫，但是樣式不好改，自己用多個(gè)div代替吧
進(jìn)度條都有了，音量調(diào)節(jié) 不能少吧，畢竟他倆UI樣式差不多，照貓畫虎唄
再加一個(gè) 靜音功能 ，省的音樂太大聲，鄰居找茬哦(⊙o⊙)
本播放器還能干什么呢歌詞滾動 有木有
搜索單曲
指定歌單播放 這個(gè)需要知道歌單的 id 不是很好找，（得上網(wǎng)易云音樂官網(wǎng)登錄自己的賬號，找到歌單，點(diǎn)進(jìn)去，抬頭看URL 里最后的 id 參數(shù)）暫時(shí)用的是“我喜歡的音樂”（歌單）的id
那閑話不多說，開整吧（原諒一個(gè)理科生的表達(dá)能力）我模仿的是網(wǎng)易云音樂的PC端，所用到的技術(shù)都是前端的基本技術(shù) HTML、CSS、JAVASCRIPT
由于我是自學(xué)的，沒有那么多規(guī)矩，我這個(gè)人看到是我感興趣的，我立馬就會去做，這個(gè)播放器也不例外。
首先先的將它“畫”出來（HTML+CSS）
我仔細(xì)看了下網(wǎng)易云音樂PC端的布局，大致分為四部分，四個(gè)模塊
頂部菜單（頂部導(dǎo)航，叫什么名無所謂了）
底部播放條 這是播放器的核心
主體內(nèi)容在右邊 歌單的詳細(xì)信息和歌曲列表
左側(cè)是導(dǎo)航和歌單組
左下角還有一個(gè)小窗，顯示正在播放歌曲的簡要信息，點(diǎn)擊小窗 展開一個(gè)歌曲詳情頁
無圖不真相
然后呢，寫頁面邏輯JavaScript播放器
播放器的控制按鈕
播放(暫停)按鈕，這個(gè)可以通過 play() 和 pause()方法實(shí)現(xiàn)
進(jìn)度條
這個(gè)通過監(jiān)聽timeupdate事件，實(shí)施更新當(dāng)前播放位置，
通過監(jiān)聽鼠標(biāo)移動事件，改變進(jìn)度條的長度
靜音按鈕，可以通過audio.muted=true實(shí)現(xiàn)
初始化歌單列表網(wǎng)易云音樂獲取歌單的API
http://music.163.com/api/play...[id]
id 歌單id
因?yàn)樯婕暗娇缬騿栴}。暫時(shí)我前臺這邊又沒有辦法跨域，所以參考了網(wǎng)上的代碼，寫個(gè)PHP做代理 （2018-09-14更新：現(xiàn)在代碼已改為Nodejs做代理服務(wù)），這樣就不存在跨域問題了。
獲取到歌單數(shù)據(jù)后，重新渲染下DOM
網(wǎng)易云音樂獲取歌曲的API
http://s.music.163.com/search...[songname]&type=1&limit=10
s 搜索內(nèi)容 type 搜索類型 limit 搜索返回結(jié)果數(shù)歌曲詳情頁
主要是歌詞和歌詞滾動
網(wǎng)易云音樂獲取歌詞API
http://music.163.com/api/song...[id]
id 歌曲id
歌詞滾動，先把獲取到的歌詞數(shù)據(jù)分割成時(shí)間點(diǎn)和歌詞兩部分，將這兩部分存入dataset中，
通過監(jiān)聽timeupdate事件，判斷和當(dāng)前播放時(shí)間相近的歌詞，記錄它的getBoundingClient()的top值，將滾動條設(shè)置到指定位置 例如：ele.srcollTop=100;
總結(jié)能力太差了，原諒理科生的無奈
附錄完整源碼，點(diǎn)擊查看
后臺代碼，點(diǎn)擊查看
此文源自我的博客
大佬，給個(gè)start唄^_^文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116512.html
摘要：高仿低配網(wǎng)頁版網(wǎng)易云音樂播放器前言沒有使用任何框架，只是想用最簡單純的代碼實(shí)現(xiàn)下前臺后臺是參考網(wǎng)上的例子寫的，代碼是在的基礎(chǔ)上重新寫的還有她的姊妹篇網(wǎng)易云音樂移動端，請查看這里寫在前頭的話鄙人野生前端一只，專業(yè)，自學(xué)前端已經(jīng)一年多了 HTML+CSS+JAVASCRIPT 高仿低配網(wǎng)頁版網(wǎng)易云音樂播放器 showImg(https://segmentfault.com/img/remo...
摘要：導(dǎo)言最近發(fā)掘了一個(gè)特別的網(wǎng)頁小游戲。于是第二天我就繼續(xù)沉迷，隨著一陣抽搐，這個(gè)游戲索然無味之后，冷靜的我決定用和開發(fā)出一個(gè)低配版。我的低配版在交互操作比較高的情況下，還是比較卡的，沒有原網(wǎng)頁的流暢性，可能后續(xù)考慮版本實(shí)現(xiàn)。 導(dǎo)言 最近發(fā)掘了一個(gè)特別happy的網(wǎng)頁小游戲--MikuTap。打開之后沉迷了一下午，導(dǎo)致開發(fā)工作沒做完差點(diǎn)就要?jiǎng)h庫跑路了，還好boss瞥了我一眼就沒下文了。于是...
摘要：庫用了魔改樣式的歌詞滾動部分用了黃軼老大的賊爽主題換膚用的變量替換。語言的下一代標(biāo)準(zhǔn)預(yù)處理器安裝與使用前端項(xiàng)目后端項(xiàng)目 音樂播放器雖然爛大街了，但是作為前端沒自己擼一個(gè)一直是個(gè)遺憾，而且偶然間發(fā)現(xiàn)pc端web版的網(wǎng)易云音樂做的實(shí)在是太簡陋了，社區(qū)仿pc客戶端的網(wǎng)易云也不多見，為了彌補(bǔ)這個(gè)遺憾，就用vue全家桶模仿mac客戶端的ui實(shí)現(xiàn)了一個(gè)，歡迎提出意見和star~ 預(yù)覽地址 源碼地址...
閱讀 1154·2021-11-16 11:45
閱讀 2802·2021-09-27 13:59
閱讀 1385·2021-08-31 09:38
閱讀 3210·2019-08-30 15:52
閱讀 1371·2019-08-29 13:46
閱讀 2141·2019-08-29 11:23
閱讀 1750·2019-08-26 13:47
閱讀 2596·2019-08-26 11:54
