实现的功能

1、首页

2、底部播放控件

3、播放页面

html音乐播放器源码用javascript和html5做一个音乐播放器附带源码 HTML

4、播放列表

5、排行榜

6、音乐搜索

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

7、侧边栏

目录构造

开拓心得与总结

1、轮播图

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

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

2、歌曲操作(喜好，分享，加入播放列表)动画、播放列表展开与删除歌曲动画Vue供应了transition的封装组件，不才列环境中，可以给任何元素和组件添加 entering/leaving 过渡

条件渲染 （利用 v-if）

条件展示 （利用 v-show）

动态组件

组件根节点

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

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

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

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

4、本地存储

将一些数据缓存到localStorage，可以减少Http要求，从而优化页面加载韶光。

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

5、图片

利用了vue-lazyload插件

用法：

6、歌词滚动与高亮

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

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

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

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

到这就ok了

7、VUEX状态管理

推举官方调试工具 devtools extension

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

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

车已到站✌️。

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

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