2. 底部播放控件
3. 播放页面
4. 播放列表
5. 排行榜
6. 音乐搜索
输入搜索关键字并点击放大镜图标
如何获取音乐播放器源代码：
目录结构
开发经验及总结
1. 轮播图
首先感谢作者ShanaMaid/vue-image-scroll的开源代码。 我自己复制了代码并做了一些修改（没有手指滑动效果）。 因为这是移动端，手指滑动切换是必不可少的，所以vue-touch（偷偷告诉你asp音乐播放器源码，vue-touch的下一个分支仍然支持vue2.0）。
2.歌曲操作（点赞、分享、添加到播放列表）动画、播放列表扩展和删除歌曲动画。 Vue 提供了过渡封装组件。 在以下情况下，可以将进入/离开转换添加到任何元素或组件。
3.线性进度条、弧形进度条
这位西班牙建筑师曾说过：“直线属于人类asp音乐播放器源码，曲线属于上帝”。 这里我大胆地使用了弧形作为进度条（几个流行音乐应用似乎没有弧形进度条）。
这里我使用Vue的bound inline样式
4.本地存储
将一些数据缓存到 localStorage 可以减少 HTTP 请求，从而优化页面加载时间。
本项目中，首页歌曲列表和搜索历史均使用本地缓存。 以搜索历史为例：
5. 图片的延迟加载
使用了vue-lazyload插件
用法：
6.歌词滚动和突出显示
因为api提供的歌词包含时间，如：
[03:57.280]请原谅我这一生对自由的不羁、放纵的热爱
首先进行字符串切割：
然后将播放监听事件与当前播放进行比较：
这里没问题
7.VUEX状态管理
推荐官方调试工具devtools扩展
之前看过很多人写的vuex，它把整个项目的数据放到一种状态，导致所有的应用状态都集中到一个大对象中。 但是，当应用程序变得非常大时，存储对象可能会变得臃肿。
所以我建议（个人意见，轻喷）：把商店拆分成模块。 每个模块都有自己的状态、突变、操作和获取器。 这样方便管理和后期维护。
车已经到了。
不知不觉就写了这么多。 老朋友们，请阅读本文。 如果觉得不错可以点赞，获取源码并加入Web前端QQ群：719526087