JSFiddle - React, Tailwind, and code Playground

by Ehsan Ziya

HTML

<canvas width='250px' height='800px' id='canvas'></canvas>

JavaScript

window.AudioContext = (window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext);
navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

var context = new AudioContext();
var analyser = null;

var map = function (value, istart, istop, ostart, ostop) {
    return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
};

function getRndColor() {
    var r = 255 * Math.random() | 0,
        g = 255 * Math.random() | 0,
        b = 255 * Math.random() | 0;
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

navigator.getUserMedia({
    audio: true
}, function (e) {
    var source = context.createMediaStreamSource(e);
    var analyser = context.createAnalyser();
    analyser.smoothingTimeConstant = 0.9;
    analyser.fftSize = 1024;
    source.connect(analyser);
    var time = new Float32Array(analyser.frequencyBinCount);
    var ctx = document.getElementById('canvas').getContext('2d');
    var iter = 0;
    var render = function () {
        analyser.getFloatTimeDomainData(time);
        //ctx.fillStyle = 'white';
        //ctx.fillRect(0,0,ctx.canvas.width, ctx.canvas.height);
        //ctx.beginPath();
        ctx.fillStyle = getRndColor();
        for (var i = 0; i < time.length; i++) {
            var value = time[i];
            //value = map(value, -1, 1, 0, 1);
            var x = map(i, 0, time.length, 0, ctx.canvas.width);
            var y = map(value, -1, 1, 0, ctx.canvas.height / 3);

            ctx.globalAlpha = 0.8;
            ctx.fillRect(x, y + iter, 1, 1000);
            //ctx.fillRect(x,y +iter,1,ctx.canvas.height);
        }
        iter += 1
        requestAnimationFrame(render);
    };

    render();
}, function () {
    //error
});