今天小编我博客时，看到了一位大神分享的自己的音乐播放器，小编我也COPY了一份分享给头条上的小伙伴，能搞定这个音乐播放器找份工作还是没压力的，毕竟这个项目还是挺好的，正在学习web前端网页制作的伙伴们福利来了，小编我我项目整理了一下，顺便写下这篇文章（项目地址文末有）

做完的项目如图所示：

实现的功能

1、首页

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代码能很好解决的了。 你可能需要配合一些框架，或一些工具，或一些设计模式， 或一些业务知识。

随着解决更多问题， 你也会积累更多的知识。之后会是漫长的积累过程， 通过项目经验、看书、看博客、思考、讨论等等，积累你的经验和知识。

你需要持之以恒和刨根问底。总之，之后就看你自己的了。还是和前提差不多的那句话：你需要主动。

最后再来提点建议：

1. 写JS的最好办法..是不停的重复练习....其实很多人反映...学JS的时候很难..但是有些人认为..它没有服务端的语言难.或者说..根本就不屑的学这种语言...什么破语言..老出各种各样的错误...浏览器还不兼容..但是...学好JS对你未来的web开发有至关重要的作用....我觉得.JS是奠定RIA的基础...或者说..客户端的开发RIA的基础.

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

如果项目有哪些缺陷，欢迎在评论区指正！