Sound Visualization with Canvas

by laustdeleuran

HTML

<script src="http://dev.ljd.dk/tmp/underscore.js"></script>
<script src="http://dev.ljd.dk/tmp/webaudio.js"></script>

<canvas id="visualization"></canvas>
<menu id="menu">
  <button id="play">Play / Pause</button>
</menu>
<span id="fps">FPS</span>
<span id="log">Log</span>

CSS

html, 
body {
  height:100%;
  
  background:rgba(34, 34, 34, 1);  
}
body {
  box-shadow:inset 0 0 15px 5px rgba(0, 0, 0, 0.5);
}
#visualization {
  display:block;
  
  position:absolute;
  top:10px;
  right:10px;
  bottom:10px;
  left:10px;
  
  background:rgba(17, 17, 17, 1);
}
#fps,
#log {
  position:absolute;
  bottom:12px;
  right:12px;
  
  color:#ccc;
  font-size:10px;
}
#log {
  left:12px;
}
#menu {
  padding:12px;
  margin:0;
  
  position:absolute;
  top:12px;
  left:12px;
}
button {
  border:none;
  padding:5px 10px;
  
  color:white;
  text-align:center;
  
  background:#96DAD6;
  
  border-radius:3px;
  box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
}

JavaScript

// usage: log('inside coolFunc',this,arguments);
// http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function () {
  var domLog = document.getElementById('log');
  log.history = log.history || [];   // store logs to an array for reference
  log.history.push(arguments);
  if(this.console){
    console.log( Array.prototype.slice.call(arguments) );
  }
  if (domLog) {
    domLog.innerHTML = Array.prototype.join.call(arguments, ',');
  }
};
// shim layer with setTimeout fallback - https://gist.github.com/paulirish/1579671
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

////////////////////////////////////
(function () {
  var Visualization, Particle,
      instance, 
      win, doc;
    
  win = window;
  doc = win.document;;
  
  // Visualization Class
  Visualization = function Visualization () {
    return this.construct.apply(this, arguments);
  };
  Visualization.prototype = (function () {
    var construct, start, stop,
        defaults,
        fitToScreen, setupSound, setupParticles, animate, analyzeSound;
...