一.简介

项目github地址

根据github上的/components/d-audio/来制作的

他的是使用纯ES6来写的，我是通过改写他的，使用VUE来做出来。

目前在自学VUE 做的比较粗糙 代码写的烂

写这个说明 是为了防止自己忘记些逻辑 总结一下知识点 希望他人看到我这个说明也能做出我这样的项目 最好到github上clone下来 看着代码在来看文章比较好

因为是写给自己看的所以写的比较烂

样式：

二.项目知识点

2.1背景粒子特效

采用的是https://vue-/这个封装的vue插件

当然也有js插件/jquery-info9838

项目中我是把代码直接拉过来了

因为是vue项目，需要注意的一个是层级关系

我把particles当做了父层级

music.vue来放置particles.vue

2.2major的实现

2.2.1实现布局

因为页面打开是个圆，而且我是通过控制class来控制形状的，所以矩形样式我先全设置为display：none

下面我将通过方法说明 来解释项目

2.2.2@click=“change”

功能：实现点击圆变成矩形 点击矩形变成圆

很简单的一段代码 应该能优化但是不知道怎么写 有待修改

###2.2.3@click=“start”

功能：点击播放音乐，背景改变

首先 通过判断这个playType来控制播放暂停 playType是通过自己定义的

开始是true

执行else 改变icon

获取音乐播放信息

进行音乐播放

音乐暂停 图标改变 且playType值变成false 实现上面if控制音乐播放暂停

2.2.4@click=“next”

控制icon 调用nextPlay（） 改变playType实现播放暂停

**关于nextplay（）**其中包含代码和start中的axios基本相似

但是因为背景图片的原因 和自己太菜的原因 不知道怎么简写 就复杂点写了

有区别的变动的地方

2.2.5播放进度条

获取当前播放时间 音乐总时间 获取百分比 赋值给width实现播放进度条的展示

2.2.6canvas获取主颜色

创建canvas

判断值 获取不同的背景图片

注意

只有在xx.onload后 加载完画布后才能获取到画布的属性

改变背景色

2.3字体颜色

颜色控制

如果对你有些帮助 希望给予小白一个start吧

交流群 626319356

我作为一个小白，因为个人兴趣自学前端 后端。在学习的道路上独自一人前行，没啥钱也没报啥班，所以想要有共同理想的道友让我们互帮互助，共同成长。

建群目的：

各种学习资料共享

各种学习导图共享

如何学习前端 后端 指点 少走弯路

遇到问题 互相解决 吸取经验

声明

因为自己是个菜鸡 大三非计算机专业 对应专业知识比较薄弱

所以这个群的主要目的是互相成长

如果有大佬愿意帮助我们

我在此表示感谢

欢迎各位道友加入