做完的项目如图所示：

实现的功能

1、首页

html5编码一个音乐播放器HTML5js开辟本身的音乐播放器万万粉丝围不雅 CSS

2、底部播放控件

3、播放页面

4、播放列表

5、排行榜

6、音乐搜索

输入搜索关键词，点击放大镜图标

7、侧边栏

API

感谢作者把api整理的这么好(点个赞)

https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=%e6%90%9c%e7%b4%a2%e9%9f%b3%e4%b9%90

目录构造

1、轮播图

首先感谢作者ShanaMaid/vue-image-scroll开源的代码，我把代码copy下来自己进行了一点修正(没有手指滑动效果)，由于这是移动端，少不了的手指滑动切换，以是添加了vue-touch(偷偷见告你，vue-touch的next分支还是支持vue2.0的)。

2、歌曲操作(喜好，分享，加入播放列表)动画、播放列表展开与删除歌曲动画

transition-group

一组过度动画，这里有个小坑的，之前看官网列表过渡的栗子，给每一项设置唯一的key值，一样平常都会用index。
以是在做的时候就把index传给key，结果过渡总是不对，后来换成对应的item

就正常了(生无可恋脸)。

3、直线进度条、弧形进度条

西班牙建筑大师曾说过：“直线属于人类，曲线则归于上帝”。
在这里我大胆的利用了弧形来作为进度条，(几大热门音乐APP貌似还没有弧形进度条)。

这里我用到了Vue的绑定内联样式

5、图片

利用了vue-lazyload插件

用法：

6、歌词滚动与高亮

由于api供应的歌词包括韶光，如：

[03:57.280]体谅我这生平不羁放肆爱自由

以是首先要进行字符串切割：

然后在播放的监听事宜中与播放确当前做比拟：

到这就ok了

7、vuex状态管理

推举官方调试工具 devtools extension

想进一步理解vuex，可以看这篇博客vuex学习实践条记

之前看到好多人写的vuex，把全体项目的数据放到了一个state里，导致运用的所有状态集中到一个很大的工具。
但是，当运用变得很大时，store 工具会变得臃肿不堪。

以是我建议(个人见地，轻喷)：将 store 分割到模块（module）。
每个模块拥有自己的 state、mutation、action、getters。
这样方便管理与后期的掩护。

车已到站✌️。

入门只是学习的开始，这时你可以利用你的技能，实现各种需求。
在实现各种需求时，你会碰着更多各种各样的问题。
有些问题可能已经不是纯挚写JS代码能很好办理的了。
你可能须要合营一些框架，或一些工具，或一些设计模式， 或一些业务知识。

随着办理更多问题， 你也会积累更多的知识。
之后会是漫长的积累过程， 通过项目履历、看书、看博客、思考、谈论等等，积累你的履历和知识。

你须要始终如一和刨根问底。
总之，之后就看你自己的了。
还是和条件差不多的那句话：你须要主动。

末了再来提点建议：

写JS的最好办法..是一直的重复练习....实在很多人反响...学JS的时候很难..但是有些人认为..它没有做事真个措辞难.或者说..根本就不屑的学这种措辞...什么破措辞..老出各种各样的缺点...浏览器还不兼容..但是...学好JS对你未来的web开拓有至关主要的浸染....我以为.JS是奠定RIA的根本...或者说..客户真个开拓RIA的根本.

这个音乐播放器项目到这里就算是做完了，想要完全代码自己学习练手的小伙伴进我的群自助领取，已经上传到群文件里了：640633433，欢迎初学和进阶中的小伙伴。

如果项目有哪些毛病，欢迎在评论区示正！