Canvas 音频可视化矩形扫描光柱

Canvas/JS Audio Visualizer

canvas，audio

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3823
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

window.onload = function() {

var audio,
        analyser,
        audioContext,
        sourceNode,
        stream,
        audioInput = document.getElementById('audiofile'),

canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        width = canvas.width = window.innerWidth,
        height = canvas.height = window.innerHeight,
        c = 0;

audioContext = new AudioContext();
    analyser = (analyser || audioContext.createAnalyser());
    analyser.smoothingTimeConstant = 1;
    analyser.fftSize = 512;

update();

audioInput.addEventListener('change', function(event) {
        stream = URL.createObjectURL(event.target.files[0]);
        if (audio)
            audio.pause();
        audio = new Audio();
        audio.src = stream;
        start();
    });

function start() {
        audio.addEventListener('canplay', function() {
            document.body.className = 'loaded';
            sourceNode = audioContext.createMediaElementSource(audio);
            sourceNode.connect(analyser);
            sourceNode.connect(audioContext.destination);
            audio.play();
        });
    }

function shape(context, freqValue, freqSequence, index) {
        var xf = (Math.sin(index * Math.PI) * freqSequence) / 512,
            yf = (Math.cos(index * Math.PI / 3 + freqValue / 64) * freqSequence) / 512,
            x = (width / 2) + (width * xf) - (freqSequence / 2),
            y = (height / 2) + (height * yf) - (freqSequence / 2);

context.beginPath();
        context.rect(x, y, freqSequence, freqSequence);
        context.strokeStyle = 'hsla(' + Math.abs(Math.sin(index)) * 180 + ', ' + 100 + '%,' + 60 + '%,' + 0.7 + ')';
        context.stroke();
    }

function update() {
        context.clearRect(0, 0, width, height);

var freqArray = new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteTimeDomainData(freqArray);

for (var i = 0; i < freqArray.length; i += 1) {
            var v = freqArray[i];
            shape(context, v, i, c);
        }

c += 0.01;
        requestAnimationFrame(update);
    }
};

编译

CSS

HTML

Canvas/JS Audio Visualizer

canvas，audio

编辑器支持Emmet

快捷键

Canvas/JS Audio Visualizer

canvas，audio

基于Canvas的现代感音乐可视化效果

HTML5 Canvas Audio 乐队表演动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：