var cvs = document.getElementById("scope");

var cvswidth = 512;

cvs.width = cvswidth;

cvs.height = 256;

var c = cvs.getContext("2d");

c.fillStyle = "#fff";

var cvs2 = document.getElementById("freq");

cvs2.width = cvswidth;

cvs2.height = 256;

var c2 = cvs2.getContext("2d");

c2.fillStyle = "#fff";

​

​

// Arrays for the analysis

var array = new Uint8Array(cvswidth);

var fft = new Float32Array(cvswidth);

​

// render loop

function render() {

  c.clearRect(0, 0, cvs.width, cvs.height);

  c2.clearRect(0, 0, cvs.width, cvs.height);

  sink.getByteTimeDomainData(array);

  sink.getFloatFrequencyData(fft);

  var minDecibels = -sink.minDecibels;

  var range = -sink.minDecibels + sink.maxDecibels;

  for (var i = 0; i < array.length; i++) {

    // data is unitless 0-255

    c.fillRect(i * 2, 128, 0.8, array[i] - 127);

    // normalize to the canvas' size, data goes from -100 to -30 by default

    c2.fillRect(i * 2, cvs2.height, 0.8, -((fft[i] + minDecibels) / range) * cvs2.height);

  }

  requestAnimationFrame(render);

}

​

// Get a context

var ctx = new AudioContext();

// Get an analyser

var sink = ctx.createAnalyser();

// Set the size of the fft analysis

sink.frequencyBinCount = 512;

// Connect it to the destination

sink.connect(ctx.destination);

// Handy cross-origin file

// Handy cross-origin file

var url = "http://corsify.appspot.com/http://paul.cx/public/think-looped-mono.wav";

var verb = "http://corsify.appspot.com/http://paul.cx/public/verb.wav";

​

// Function to get a file from a URL, decode it, 

function getFile(url, cb) {

  var request = new XMLHttpRequest();

  request.open("GET", url, true);

  request.responseType = "arraybuffer";

​

  request.onload = function() {

    ctx.decodeAudioData(request.response, function(data) {

      cb(data);

    }, function() {

      alert("decodeAudioData error");

    });

  };

​

  request.send();

}

​

/**** Your code here ****/

​

getFile(url, function(data) {

  getFile(verb, function(verb) {

  var source = ctx.createBufferSource();

  source.buffer = data;

  source.loop = true;

  source.playbackRate.value = 1.44;

  source.connect(sink);

  source.start(0);

  });

});

​

/****               ****/

​

render();