关于html5:好玩的canvas基于css3audioapi和canvas实现的-音频动效

借鉴他人代码利用画布及声音api 做的一个音乐的播放动效

线上地址:http://www.ooo0o.com/2019/fas…

JS包曾经公布到npm下来(https://www.npmjs.com/package…

        npm i fashion_music_cvs


        // vue我的项目引入形式一:
        // const fashion_music_cvs = require('fashion_music_cvs')
        // Vue.prototype.cvsgetready =fashion_music_cvs

        // vue我的项目引入形式二:
        import fashion_music_cvs from 'fashion_music_cvs'
        Vue.prototype.cvsgetready = fashion_music_cvs


        //  // 调用此办法须要传的的params的值应为 下边musiccvsparams的构造 
        //  //在组件中应用前 定义好data里的自定义变量,如下的 musiccvsparams 即可
      不//  ..................
      再//  data(){
      需//      return{
      要//          musiccvsparams : {
      这//              cvsdom:'',//画布节点元素
      个//              size:800,//画布原始默认宽高
      参//              sourcedom:'',//音频源节点元素
      数//              bgcolor:'rgba(255,255,0,0.5)'//画布圆圈背景色彩
        //          }
        //      }
        //  )

        ..................
        mounted(){
            //【留神：画布元素必须设置一个方形的父级容器】
            // 参数：画布元素。画布的默认宽度。音频元素。画布中圆圈背景的色彩
            let _this=this;
            _this.cvsgetready(_this.$refs.musiccvs,800,_this.$refs.musicsrc,'rgba(255,255,0,0.8)')
        }

        ..........................................
        <div id="musiccvsbox" ref="musiccvsbox" style="position: fixed;right: 20px; top: 20px; width: 40vw;height: 40vw;">
          <canvas ref="musiccvs" id="musiccvs"></canvas>
      </div>
      <audio style="position: fixed;right: 20px; bottom: 20px;" controls ref="musicsrc" preload="true" src="http://www.ooo0o.com/music/WhenIsawyouIfellinlove.mp3"></audio>
      
        

    留神款式设置：
    // 自定义画布实现音频显示
    #musiccvsbox {
        margin: 0 auto;
        position: relative;
        /* background-color: royalblue; */
        background: url('http://ooo0o.com/4eafc201905200012388758.jpg') center center no-repeat;
        background-size: cover;
    }
    
    #musiccvs {
        display: block;
        /* animation: rotate 6s linear infinite; */
        position: absolute;
        left: 0;
        top: 0;
        transform-origin: 0 0;
    }
    
    @keyframes rotate {
        0% {
            transform: rotate(0deg)
        }
        100% {
            transform: rotate(360deg)
        }
    }

        script引入形式
        
        1. <script src="./music_canvas_show.js"></script>
        2. 适合的机会去调用 cvsgetready('参数') 即可
        // 参数：画布元素。画布的默认宽度。音频元素【留神：画布元素必须设置一个方形的父级容器。代码中已做好适配缩放的设置】。画布中圆圈背景的色彩
        // 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及声音api做的音频显示成果

github: https://github.com/Chinegoodman/fashion_music_cvs

我的项目发动原因:   始终就想做一个和网易云音乐相似的动效进去。所以空闲时就钻研学习
        
我的项目过程:       好吧，挺吃力的反正是。。。你喜爱感觉能用就行。哈哈

公布的工夫有些久了。在此只做分享。欢送沟通交流