Microphone Frequency Visualizer

HTML

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

CSS

#visualizer {
    background-color: #ddd;
}

JavaScript

var context = new AudioContext();
var analyser = context.createAnalyser();
var gain = context.createGain();
gain.gain.value = 0;
analyser.fftSize = 2048;
var frequencyData = new Float32Array(analyser.frequencyBinCount);

analyser.connect(gain);
gain.connect(context.destination);

// Visualizer
var analyzerSamples = analyser.frequencyBinCount;
var canvas = document.querySelector("#visualizer");
var ctx = canvas.getContext("2d");
canvas.width = analyser.frequencyBinCount;
canvas.height = 256;

function showFrequency() {
    var inp = frequencyData;
    analyser.getFloatFrequencyData(inp);
    ctx.clearRect(0, 0, analyzerSamples, 256);
    ctx.beginPath();
    ctx.moveTo(0.5, 255.5 - 255.5*20*Math.pow(10, inp[0]/20));
    for (var i = 1; i < inp.length; i++) {
        ctx.lineTo(Math.log(i)*120, 255.5 - 255.5*20*Math.pow(10, inp[i]/20));
    }
    ctx.stroke();
}

setInterval(showFrequency, 1000/50);

window.addEventListener("load", function() {
    navigator.getUserMedia({audio: true, video: false}, function(stream) {
        var mic = context.createMediaStreamSource(stream);
        mic.connect(analyser);
    }, function(err) { throw new Error(err.name) });
});