一.简介
项目github地址
根据github上的http://www.daiwei.org/components/d-audio/来制作的
他的是使用纯ES6来写的，我是通过改写他的，使用VUE来做出来。
目前在自学VUE 做的比较粗糙 代码写的烂
写这个说明 是为了防止自己忘记些逻辑 总结一下知识点 希望他人看到我这个说明也能做出我这样的项目 最好到github上clone下来 看着代码在来看文章比较好
因为是写给自己看的所以写的比较烂
样式：
二.项目知识点
2.1背景粒子特效
采用的是https://vue-particles.netlify.com/这个封装的vue插件
当然也有js插件http://www.jq22.com/jquery-info9838
项目中我是把代码直接拉过来了
因为是vue项目，需要注意的一个是层级关系
我把particles当做了父层级
music.vue来放置particles.vue
2.2major的实现
2.2.1实现布局
因为页面打开是个圆，而且我是通过控制class来控制形状的，所以矩形样式我先全设置为display：none
下面我将通过方法说明 来解释项目
[email protected]=“change”
功能：实现点击圆变成矩形 点击矩形变成圆
很简单的一段代码 应该能优化但是不知道怎么写 有待修改
###[email protected]=“start”
功能：点击播放音乐，背景改变
首先 通过判断这个playType来控制播放暂停 playType是通过自己定义的
开始是true
执行else 改变icon
获取音乐播放信息
进行音乐播放
音乐暂停 图标改变 且playType值变成false 实现上面if控制音乐播放暂停
[email protected]=“next”
控制icon 调用nextPlay（） 改变playType实现播放暂停
**关于nextplay（）**其中包含代码和start中的axios基本相似
但是因为背景图片的原因 和自己太菜的原因 不知道怎么简写 就复杂点写了
有区别的变动的地方
2.2.5播放进度条
获取当前播放时间 音乐总时间 获取百分比 赋值给width实现播放进度条的展示
2.2.6canvas获取主颜色
创建canvas
判断值 获取不同的背景图片
注意
只有在xx.onload后 加载完画布后才能获取到画布的属性
改变背景色
2.3字体颜色
颜色控制
如果对你有些帮助 希望给予小白一个start吧
交流群 626319356
我作为一个小白，因为个人兴趣自学前端 后端。在学习的道路上独自一人前行，没啥钱也没报啥班，所以想要有共同理想的道友让我们互帮互助，共同成长。
建群目的：
各种学习资料共享
各种学习导图共享
如何学习前端 后端 指点 少走弯路
遇到问题 互相解决 吸取经验
声明
因为自己是个菜鸡 大三非计算机专业 对应专业知识比较薄弱
所以这个群的主要目的是互相成长
如果有大佬愿意帮助我们
我在此表示感谢
欢迎各位道友加入