国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

sean / 3142人閱讀

摘要：高仿低配網頁版網易云音樂播放器前言沒有使用任何框架，只是想用最簡單純的代碼實現下前臺后臺是參考網上的例子寫的，代碼是在的基礎上重新寫的還有她的姊妹篇網易云音樂移動端，請查看這里寫在前頭的話鄙人野生前端一只，專業，自學前端已經一年多了

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

前言

沒有使用任何框架，只是想用最簡單純js的代碼實現下

前臺: Javascript+jQuery

后臺: php/nodejs（php是參考網上的例子寫的，nodejs代碼是在php的基礎上重新寫的）

還有她的姊妹篇（網易云音樂移動端），請查看這里 https://github.com/Yangfan2016/cloud-music-mobile#cloud-music-mobile

寫在前頭的話

鄙人野生前端一只，gis專業，自學前端已經一年多了，為什么要寫個音樂播放器呢？原因有兩個：

本人是網易云音樂的重度用戶，近乎瘋狂

自學了前端這么久了，也是想檢驗下自己的成果吧

本播放器要干什么呢

簡單的 播放 暫停 那當然不能少

切換歌曲，上一首 、 下一首 也得有

進度條 ，這個有點復雜，本來想用 input[range] 寫，但是樣式不好改，自己用多個div代替吧

進度條都有了，音量調節 不能少吧，畢竟他倆UI樣式差不多，照貓畫虎唄

再加一個 靜音功能 ，省的音樂太大聲，鄰居找茬哦(⊙o⊙)

本播放器還能干什么呢

歌詞滾動 有木有

搜索單曲

指定歌單播放 這個需要知道歌單的 id 不是很好找，（得上網易云音樂官網登錄自己的賬號，找到歌單，點進去，抬頭看URL 里最后的 id 參數）暫時用的是“我喜歡的音樂”（歌單）的id

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

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

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

我仔細看了下網易云音樂PC端的布局，大致分為四部分，四個模塊

頂部菜單（頂部導航，叫什么名無所謂了）

底部播放條 這是播放器的核心

主體內容在右邊 歌單的詳細信息和歌曲列表

左側是導航和歌單組

左下角還有一個小窗，顯示正在播放歌曲的簡要信息，點擊小窗 展開一個歌曲詳情頁

無圖不真相

然后呢，寫頁面邏輯JavaScript
播放器

播放器的控制按鈕

播放(暫停)按鈕，這個可以通過 play() 和 pause()方法實現

進度條

這個通過監聽timeupdate事件，實施更新當前播放位置，
通過監聽鼠標移動事件，改變進度條的長度

靜音按鈕，可以通過audio.muted=true實現

初始化歌單列表

網易云音樂獲取歌單的API
http://music.163.com/api/play...[id]

id 歌單id

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

搜索歌曲

網易云音樂獲取歌曲的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;

先寫到這里吧

總結能力太差了，原諒理科生的無奈

附錄

完整源碼，點擊查看
后臺代碼，點擊查看

此文源自我的博客

大佬，給個start唄^_^

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116512.html

相關文章

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

    摘要：高仿低配網頁版網易云音樂播放器前言沒有使用任何框架，只是想用最簡單純的代碼實現下前臺后臺是參考網上的例子寫的，代碼是在的基礎上重新寫的還有她的姊妹篇網易云音樂移動端，請查看這里寫在前頭的話鄙人野生前端一只，專業，自學前端已經一年多了 HTML+CSS+JAVASCRIPT 高仿低配網頁版網易云音樂播放器 showImg(https://segmentfault.com/img/remo...

    RaoMeng 評論0 收藏0

  • 基于canvas和web audio實現低配版MikuTap

    摘要：導言最近發掘了一個特別的網頁小游戲。于是第二天我就繼續沉迷，隨著一陣抽搐，這個游戲索然無味之后，冷靜的我決定用和開發出一個低配版。我的低配版在交互操作比較高的情況下，還是比較卡的，沒有原網頁的流暢性，可能后續考慮版本實現。 導言 最近發掘了一個特別happy的網頁小游戲--MikuTap。打開之后沉迷了一下午，導致開發工作沒做完差點就要刪庫跑路了，還好boss瞥了我一眼就沒下文了。于是...

    Awbeci 評論0 收藏0

  • Vue全家桶高仿網易云音樂mac客戶端版（不像賠十個！！）

    摘要：庫用了魔改樣式的歌詞滾動部分用了黃軼老大的賊爽主題換膚用的變量替換。語言的下一代標準預處理器安裝與使用前端項目后端項目 音樂播放器雖然爛大街了，但是作為前端沒自己擼一個一直是個遺憾，而且偶然間發現pc端web版的網易云音樂做的實在是太簡陋了，社區仿pc客戶端的網易云也不多見，為了彌補這個遺憾，就用vue全家桶模仿mac客戶端的ui實現了一個，歡迎提出意見和star~ 預覽地址 源碼地址...

    mgckid 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<