HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器

媒介

没有运用任何框架，只是想用最简纯真js的代码完成下

• 前台: Javascript+jQuery
• 背景: php/nodejs（php是参考网上的例子写的，nodejs代码是在php的基础上从新写的）
• 另有她的姊妹篇（网易云音乐挪动端），请检察这里 https://github.com/Yangfan2016/cloud-music-mobile#cloud-music-mobile

写在前头的话

鄙人野生前端一只，gis专业，自学前端已一年多了，为何要写个音乐播放器呢？缘由有两个：

1. 本人是网易云音乐的重度用户，近乎猖獗
2. 自学了前端这么久了，也是想磨练下本身的效果吧

本播放器要干什么呢

1. 简朴的 播放 停息 那当然不能少
2. 切换歌曲，上一首 、 下一首 也得有
3. 进度条 ，这个有点庞杂，原本想用 input[range] 写，然则款式不好改，本身用多个div替代吧
4. 进度条都有了，音量调治 不能少吧，毕竟他俩UI款式差不多，照猫画虎呗
5. 再加一个 静音功用 ，省的音乐太高声，邻人找茬哦(⊙o⊙)

本播放器还能干什么呢

1. 歌词转动 有木有
2. 搜刮单曲
3. 指定歌单播放 这个须要晓得歌单的 id 不是很好找，（得上网易云音乐官网登录本身的账号，找到歌单，点进去，仰面看URL 里末了的 id 参数）临时用的是“我喜好的音乐”（歌单）的id

那闲话不多说，开整吧（谅解一个理科生的表达才能）

我模拟的是网易云音乐的PC端，所用到的手艺都是前端的基础手艺 HTML、CSS、JAVASCRIPT
由于我是自学的，没有那么多礼貌，我这个人看到是我感兴趣的，我立马就会去做，这个播放器也不破例。

起首先的将它“画”出来（HTML+CSS）

我细致看了下网易云音乐PC端的规划，大抵分为四部份，四个模块

1. 顶部菜单（顶部导航，叫什么名无所谓了）
2. 底部播放条 这是播放器的中心
3. 主体内容在右侧 歌单的详细信息和歌曲列表
4. 左边是导航和歌单组
5. 左下角另有一个小窗，显现正在播放歌曲的扼要信息，点击小窗 睁开一个歌曲详情页

无图不原形

然后呢，写页面逻辑JavaScript

播放器

1. 播放器的掌握按钮

播放(停息)按钮，这个能够经由过程 play() 和 pause()要领完成

1. 进度条

这个经由过程监听timeupdate事宜，实行更新当前播放位置，
经由过程监听鼠标挪动事宜，转变进度条的长度

1. 静音按钮，能够经由过程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呗^_^