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

文章在这里我先说下我自己建的前端学习群：593757064，首先你要是前端党，不管你是小白还是大牛，小编我都挺欢迎，小白嘛，多问点问题也就学好了，不定期分享干货，包括2017年就业前端案例源码和一套零基础学习视频，欢迎初学和进阶中的小伙伴。

做完的项目如图所示：

实现的功能

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

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频