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网易云音乐APIhttp://music.163.com/api/play..初始化歌单列表。.[id]id歌曲列表的id，因为涉及到跨域问题。前台暂时没办法跨域，于是参考网上的代码，写了个PHP做代理（2018-09-14更新：代码现在改成了Nodejs作为代理服务），这样就不会出现跨域问题。获取歌曲列表数据后，重新渲染DOM搜索歌曲网易云音乐获取歌曲APIhttp://s.music.163.com/search...[songname]&type=1&limit=10s搜索内容类型搜索类型限制搜索结果条数和歌曲详情页主要是歌词和歌词滚动网易云音乐获取歌词APIhttp://music.163.com/api/song...[id]id歌曲id歌词滚动,首先得到歌词数据，分为时间点和歌词两部分，这两部分存储在dataset中。通过监听timeupdate事件，判断接近当前播放时间的歌词，记录其getBoundingClient()的top值，将滚动条设置到指定位置例如：ele.srcollTop=100;先写到这里吧。总结能力太差。原谅理科生的无奈，附上完整源码。点击查看后台代码。点击查看我博主的这篇文章，给我一个开始^_^
