ColorToPeriodicWave

by mohayonao

HTML

<canvas id="canvas"></canvas>

CSS

#canvas {
    width: 100%;
    height: 240px;
    background: black;
}

JavaScript

var audioContext = new AudioContext();

var color = "0104";

function colorToPeriodicWave(audioContext, color) {
    var real, imag;
    
    if (!/^[0-9a-f]+$/i.test(color)) {
        real = new Float32Array(0);
        imag = new Float32Array(0);
    } else {
        color = [ 0 ].concat(color.split("").map(function(ch) {
            return parseInt(ch, 16);
        }));
        real = new Float32Array(color.length);
        imag = new Float32Array(color);
    }
    
    return audioContext.createPeriodicWave(real, imag);
}

function drawWave(color) {
    var audioContext = new OfflineAudioContext(1, 8000, 8000);
    var wave = colorToPeriodicWave(audioContext, color);
    var osc = audioContext.createOscillator();
    
    osc.frequency.value = 1;
    osc.setPeriodicWave(wave);
    osc.start(0);
    osc.connect(audioContext.destination);
    
    audioContext.oncomplete = function(e) {
        var canvas = document.getElementById("canvas");
        canvas.width = 1000;
        canvas.height = 500;
        
        var context = canvas.getContext("2d");
        var data = e.renderedBuffer.getChannelData(0);
        
        context.lineWidth = 5;
        context.fillStyle = "#000";
        context.strokeStyle = "#0f0";
        
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        
        for (var i = 0, imax = data.length; i < imax; i++) {
            var x = (i / imax) * canvas.width;
            var y = (canvas.height - data[i] * canvas.height) * 0.5;
            context.lineTo(x, y);
        }
        context.stroke();
    };
    audioContext.startRendering();
}

drawWave(color);