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

sean 发布于2019-08-30 15:52 / 3141人阅读

摘要：高仿低配网页版网易云音乐播放器前言没有使用任何框架，只是想用最简单纯的代码实现下前台后台是参考网上的例子写的，代码是在的基础上重新写的还有她的姊妹篇网易云音乐移动端，请查看这里写在前头的话鄙人野生前端一只，专业，自学前端已经一年多了

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呗^_^

云服务器 GPU云服务器高仿低配 javascript播放音乐云服务器网页播放音乐免费云播放网页版

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116512.html

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

摘要：高仿低配网页版网易云音乐播放器前言没有使用任何框架，只是想用最简单纯的代码实现下前台后台是参考网上的例子写的，代码是在的基础上重新写的还有她的姊妹篇网易云音乐移动端，请查看这里写在前头的话鄙人野生前端一只，专业，自学前端已经一年多了 HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 showImg(https://segmentfault.com/img/remo...

RaoMeng 2019-08-20 14:26 评论0 收藏0
基于canvas和web audio实现低配版MikuTap

摘要：导言最近发掘了一个特别的网页小游戏。于是第二天我就继续沉迷，随着一阵抽搐，这个游戏索然无味之后，冷静的我决定用和开发出一个低配版。我的低配版在交互操作比较高的情况下，还是比较卡的，没有原网页的流畅性，可能后续考虑版本实现。导言最近发掘了一个特别happy的网页小游戏--MikuTap。打开之后沉迷了一下午，导致开发工作没做完差点就要删库跑路了，还好boss瞥了我一眼就没下文了。于是...

Awbeci 2019-08-23 12:31 评论0 收藏0
Vue全家桶高仿网易云音乐mac客户端版（不像赔十个！！）

摘要：库用了魔改样式的歌词滚动部分用了黄轶老大的贼爽主题换肤用的变量替换。语言的下一代标准预处理器安装与使用前端项目后端项目音乐播放器虽然烂大街了，但是作为前端没自己撸一个一直是个遗憾，而且偶然间发现pc端web版的网易云音乐做的实在是太简陋了，社区仿pc客户端的网易云也不多见，为了弥补这个遗憾，就用vue全家桶模仿mac客户端的ui实现了一个，欢迎提出意见和star~ 预览地址源码地址...

mgckid 2019-08-26 10:23 评论0 收藏0