当前位置: 首页 > Web前端 > HTML5

Funcanvas-基于css3、audioapi和canvas的音频动画

时间:2023-04-05 01:26:39 HTML5

借鉴了别人的代码使用canvas和soundapi制作了一个音乐播放动画在线地址:http://www.ooo0o.com/2019/fas...JS包已经发布到npm(https://www.npmjs.com/package...npmifashion_music_cvs//Vue项目引入方法一://constfashion_music_cvs=require('fashion_music_cvs')//Vue.prototype.cvsgetready=fashion_music_cvs//Vue项目导入方法二:importfashion_music_cvsfrom'fashion_music_cvs'Vue.prototype.cvsgetready=fashion_music_cvs////调用该方法时需要传递的params的值应该是下面的musiccvsparams结构///在组件中使用之前先在data中定义自定义变量,下面的musiccvsparams可以不使用//.....................然后//data(){required//return{To//musiccvsparams:{This//cvsdom:'',//canvas节点元素//size:800,//canvas原始默认宽高参数//sourcedom:'',//audio源节点元素数//bgcolor:'rgba(255,255,0,0.5)'//画布圆圈背景颜色//}//}//)........................山d(){//[注意:canvas元素必须设置方形父容器]//参数:canvas元素的默认宽度canvas.音频元素。画布中圆圈的背景颜色let_this=this;_this.cvsgetready(_this.$refs.musiccvs,800,_this.$refs.musicsrc,'rgba(255,255,0,0.8)')}.........................................

注意样式设置://自定义音频显示画布#musiccvsbox{保证金:0自动;位置:相对;/*背景颜色:宝蓝色;*/background:url('http://ooo0o.com/4eafc201905200012388758.jpg')center中心不重复;背景尺寸:封面;}#musiccvs{显示:块;/*动画:旋转6s线性inf启动;*/位置:绝对;左:0;顶部:0;变换原点:00;}@keyframesrotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}脚本引入方法一.2.适时调用cvsgetready('parameter')//参数:画布元素canvas的默认宽度。Audio元素【注意:Canvas元素必须设置一个正方形的父容器。自适应缩放设置已在代码中进行]。画布中圆圈背景的颜色//cvsgetready(document.getElementById('cvs'),800,document.getElementById('music'));一般可以通过onload调用window.onload=function(){cvsgetready(document.getElementById('cvs'),800,document.getElementById('music'),'rgba(66,66,66,0.6)');}项目介绍:基于canvas和soundapi的音频展示效果github:https://github.com/Chiinegoodman/fashion_music_cvs项目上线原因:一直想做一个类似网易云音乐的动感效果。所以我在业余时间学习学习。项目过程:嗯,反正挺费劲的。..你可以使用任何你喜欢的东西。哈哈好久没发帖了只分享到这里。欢迎交流