ブラウザでマイク入力をビジュアライズ

Chromeでお試しください。マイク入力をFFTでビジュアライズします。

【追記】
※ ChromeではgetUserMediaがhttpsじゃないと動作しなくなりました。それに伴いjsdo.it上では動作しなくなりました。
※ Firefoxで こちらのコード をお試しください。（ http://jsdo.it/kimmy/oNv4 ）

DEMO

JavaScript

(function(win, doc) {

    "use strict";
    
    var canvas = doc.getElementById("canvas"),
        ctx    = canvas.getContext("2d");
    
    navigator.webkitGetUserMedia({
        audio: true
    }, _handleSuccess, _handleError);
    
    function _handleSuccess(evt) {
        var audioCtx = new AudioContext(),
            src      = audioCtx.createMediaStreamSource(evt),
            analyser = audioCtx.createAnalyser(evt);

        var LENGTH = 256,
            data   = new Uint8Array(LENGTH),
            w      = 0,
            i      = 0;

        
        analyser.fftSize = 1024;
        
        src.connect(audioCtx.destination);
        src.connect(analyser);
        
        setInterval(function() {
            canvas.width  = window.innerWidth;
            canvas.height = window.innerHeight;
            
            ctx.fillStyle = "#3e3e3e";
            
            w = canvas.width / LENGTH,
            
            analyser.getByteFrequencyData(data);

            for (i = 0; i < LENGTH; ++i) {
                ctx.rect(i * w, canvas.height - data[i], w, data[i]);
            }
            
            ctx.fill();
        }, 20);
    }
    
    function _handleError() {
    
    }
    
})(this, document);