Starting with the Web Audio API

Created a web Audio analyser

by janetyc

HTML

<canvas id='canvas1'>
</canvas>

JavaScript

var url = 'http://thelab.thingsinjars.com/web-audio-tutorial/hello.mp3';

var source;
var context = new webkitAudioContext();
var analyser = context.createAnalyser();
var canvas=document.getElementById('canvas1');
var canvasContext=canvas.getContext('2d');


function playSound(buffer) {
    source = context.createBufferSource();
    //var gainNode = context.createGainNode();
    //Now we create an analizer

    source.buffer = buffer;
    // source.connect(gainNode);
    source.connect(analyser);
    analyser.connect(context.destination);
    //    gainNode.connect(context.destination);
    //    gainNode.gain.value=2;
    source.noteOn(0);
}

function init() {

    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';
    request.onload = function() {
        context.decodeAudioData(request.response, function(buffer) {
            //let's play it then
            playSound(buffer);
        });
    };
    request.send();
}

function draw(){
    window.webkitRequestAnimationFrame(draw);
    render();
}
var separator=2;
var height=canvas.height=500;
var width=canvas.width=500;
var spacer=2;



function render(){
    //Get the Sound data
    var freqByteData = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(freqByteData);     //analyser.getByteTimeDomainData(freqByteData);
    //we Clear the Canvas
    canvasContext.beginPath();
    canvasContext.clearRect(0, 0, width, height);
    canvasContext.fillStyle = '#000000';
    canvasContext.lineCap = 'round';
    canvasContext.fill();
    for(var i=0;i<analyser.frequencyBinCount;i++){
        canvasContext.fillRect(i*2,height,1,-freqByteData[i]);
    }
    
}
init();
draw();