render_audio_data.js

function renderAudioData(canvas, data) {
	// Grab handy variables with local names 
	var height = canvas.height;
	var width = canvas.width;
	var length = data.length;
  	var stepSize =  width / length;
  
	// Helper functions to make the index selection logic more readable further down
  	var xCoord = function(idx) { return stepSize * idx; };
  	var xNext = function(idx) { return xCoord(idx + 1); };
  	var yCoord = function(idx) { return (((0.95 * data[idx]) + 1.0) / 2.0) * height; };
  	var yNext = function(idx) { return yCoord(idx + 1); };

  	// Initialize the canvas  
  	var context = canvas.getContext("2d");
  	context.fillStyle = "#FFF";
  	context.fillRect(0, 0, width, height);

	// Begin the path and move to the initial location
  	var index = 0;
	context.beginPath();
  	context.moveTo(xCoord(index), yCoord(index));

	// Iterate through all of the data points by incrementally drawing line segments on the canvas
  	while(index < (length - 1)) {
    		context.lineTo(xCoord(index), yCoord(index));
    		++index;
  	}

	// Close the path
	context.stroke();
};