js音乐可视化音浪

原理

使用的是js的AudioContext

效果图

代码

function Visual(audio){
     window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
     audio =audio||this.$refs.audio;
     let ctx = new AudioContext();
     let analyser = ctx.createAnalyser();//用户频率分析,一个必须为2次方的数,范围为32-32768
     let audioSrc = ctx.createMediaElementSource(audio);
     audioSrc.connect(analyser);
     analyser.connect(ctx.destination);
     let frequencyData = new Uint8Array(analyser.frequencyBinCount);
     let canvas = document.getElementById('canvas'),
         cwidth = canvas.width,
         cheight = canvas.height,
         meterWidth = 10, //每一个音浪条的宽度
         capHeight = 2,//音浪顶部小块高度
         capStyle = '#5b5bea',//小块颜色
         meterNum = 800 / (10 + 2), //音浪的数量
         capYPositionArray = []; ////存储垂直位置
         ctx = canvas.getContext('2d');
         let gradient = ctx.createLinearGradient(0, 0, 0, 300);
         gradient.addColorStop(1, '#8140ff');
         gradient.addColorStop(0.5, '#5b5bea');
         gradient.addColorStop(0, '#fff');
     function renderFrame() {
         let array = new Uint8Array(analyser.frequencyBinCount);
         analyser.getByteFrequencyData(array);
         let step = Math.round(array.length / meterNum);
         ctx.clearRect(0, 0, cwidth, cheight);
         for (let i = 0; i < meterNum; i++) {
             let value = array[i * step];
             if (capYPositionArray.length < Math.round(meterNum)) {
                 capYPositionArray.push(value);
             };
             ctx.fillStyle = capStyle;
             if (value < capYPositionArray[i]) {
                 ctx.fillRect(i * 12, cheight - (--capYPositionArray[i]), meterWidth, capHeight);
             } else {
                 ctx.fillRect(i * 12, cheight - value, meterWidth, capHeight);
                 capYPositionArray[i] = value;
             };
             ctx.fillStyle = gradient;
             ctx.fillRect(i * 12 , cheight - value + capHeight, meterWidth, cheight);
         }
         requestAnimationFrame(renderFrame);
     }
     renderFrame();
     this.VisualState=false;
}

在audio开始播放的时候执行该函数,传入audio元素,即可在canvas上看到效果