Microphone Frequency Visualizer

HTML

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

CSS

#visualizer {
    background-color: #ddd;
}

JavaScript

window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;

var context = new AudioContext();
var analyser = context.createAnalyser();
analyser.fftSize = 2048;
var frequencyData = new Uint8Array(analyser.frequencyBinCount);

analyser.connect(context.destination);

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

function showFrequency() {
    var inp = frequencyData;
    analyser.getFloatFrequencyData(frequencyData);
    ctx.clearRect(0, 0, analyzerSamples, 256);
    ctx.beginPath();
    ctx.moveTo(0.5, 127.5 - 127*inp[0]);
    for (var i = 1; i < inp.length; i++) {
        ctx.lineTo(i + 0.5, 127.5 - 127*inp[i]);
    }
    ctx.stroke();
}

setInterval(showFrequency, 1000/50);

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