用javascript和html5作一个音乐播放器，附带源码

效果图：

实现的功能

一、首页

二、底部播放控件

三、播放页面

四、播放列表

五、排行榜

六、音乐搜索

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

七、侧边栏

目录结构

 

开发心得与总结

一、轮播图

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

地址：https://github.com/hzzly/MagicMusic/blob/master/src/components/banner.vue

二、歌曲操做(喜欢，分享，加入播放列表)动画、播放列表展开与删除歌曲动画Vue提供了transition的封装组件，在下列情形中，能够给任何元素和组件添加 entering/leaving 过渡

• 条件渲染 （使用 v-if）

• 条件展现 （使用 v-show）

• 动态组件

• 组件根节点

transition-group一组过分动画，这里有个小坑的，以前看官网列表过渡的栗子，给每一项设置惟一的key值，通常都会用index。因此在作的时候就把index传给key，结果过渡总是不对，后来换成对应的item就正常了(生无可恋脸)。

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

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

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

四、本地存储

将一些数据缓存到localStorage，能够减小Http请求，从而优化页面加载时间。

在这个项目中首页歌曲列表以及搜索历史用到了本地缓存，拿搜索历史来举栗：

五、图片懒加载

使用了vue-lazyload插件

用法：

六、歌词滚动与高亮

由于api提供的歌词包括时间，如：

[03:57.280]原谅我这一辈子不羁放纵爱自由

因此首先要进行字符串切割：

而后在播放的监听事件中与播放的当前作对比：

到这就ok了

七、VUEX状态管理

推荐官方调试工具 devtools extension

以前看到好多人写的vuex，把整个项目的数据放到了一个state里，致使应用的全部状态集中到一个很大的对象。可是，当应用变得很大时，store 对象会变得臃肿不堪。

因此我建议(我的看法，轻喷)：将 store 分割到模块（module）。每一个模块拥有本身的 state、mutation、action、getters。这样方便管理与后期的维护。

车已到站✌️。

不知不觉写了这么多，老铁们凑合这看吧，以为还行的能够点赞，须要完整代码练习的加群：453833554已经上传到群文件。