基于vue,js的简单pc 音乐播放器

最新推荐文章于 2024-04-04 09:42:58 发布

置顶啦咯啦咯啦啦咯

最新推荐文章于 2024-04-04 09:42:58 发布

阅读量1.7k

点赞数

分类专栏： vue 学习文章标签： vue axios 音乐播放器 canvas

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_43055079/article/details/100246311

版权

学习同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

一.简介

项目github地址
根据github上的http://www.daiwei.org/components/d-audio/来制作的

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

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

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

样式：

在这里插入图片描述

$[外链图片转存失败(img-z10OI4go-1567401272633)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1567392820236.png)]$

$[外链图片转存失败(img-xTODwlm2-1567401272634)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1567392915185.png)]$

二.项目知识点

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

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

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

我作为一个小白，因为个人兴趣自学前端后端。在学习的道路上独自一人前行，没啥钱也没报啥班，所以想要有共同理想的道友让我们互帮互助，共同成长。
建群目的：
各种学习资料共享
各种学习导图共享
如何学习前端后端指点少走弯路
遇到问题互相解决吸取经验
声明
因为自己是个菜鸡大三非计算机专业对应专业知识比较薄弱
所以这个群的主要目的是互相成长
如果有大佬愿意帮助我们
我在此表示感谢
欢迎各位道友加入

啦咯啦咯啦啦咯

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
基于vue,js的简单pc 音乐播放器

一.简介github地址：https://github.com/YXYCZXY/music根据github上的http://www.daiwei.org/components/d-audio/来制作的他的是使用纯ES6来写的，我是通过改写他的，使用VUE来做出来。目前在自学VUE 做的比较粗糙代码写的烂写这个说明是为了防止自己忘记些逻辑总结一下知识点希望他人看到我这个说明也能做出...
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。