swys/audio_to_canvas.js

## audio_to_canvas.js
// canvas stuff
var canvas = document.createElement('canvas');
canvas.id = 'c';
canvas_context = canvas.getContext('2d');
canvas.width = 700;
canvas.height = 300;
canvas.margin = '1em';
canvas.display = 'block';
document.body.appendChild(canvas);

// audio stuff
var audio = new Audio();
var audioSrc = 'http://ia601007.us.archive.org/18/items/NodeUp54_20131107/NodeUp54.mp3';
audio.src = audioSrc;
audio.controls = true;
audio.autoplay = true;
document.body.appendChild(audio);

// analyser stuff
var context = new webkitAudioContext();
var analyser = context.createAnalyser();
analyser.fftSize = 2048;

// connect the stuff up to eachother
var source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);


// draw the analyser to the canvas
function freqAnalyser() {;
  var sum;
  var average;
  var bar_width;
  var scaled_average;
	var num_bars = 60;
  var data = new Uint8Array(2048);
  analyser.getByteFrequencyData(data);

  // clear canvas
  canvas_context.clearRect(0, 0, canvas.width, canvas.height);
  var bin_size = Math.floor(data.length / num_bars);
  for (var i = 0; i < num_bars; i += 1) {
    sum = 0;
    for (var j = 0; j < bin_size; j += 1) {
      sum += data[(i * bin_size) + j];
    }
  	average = sum / bin_size;
  	bar_width = canvas.width / num_bars;
  	scaled_average = (average / 256) * canvas.height;
  	canvas_context.fillRect(i * bar_width, canvas.height, bar_width - 2, - scaled_average);
	}
}

// draw another analyser frame to canvas
setInterval(freqAnalyser, 60);


## index.html
<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Audio to Canvas</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
          #c {
            display : block;
            margin : 1em;
          }
        </style>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <h1>Fun with HTML5 Audio</h1>
    </body>
</html>
	// canvas stuff
	var canvas = document.createElement('canvas');
	canvas.id = 'c';
	canvas_context = canvas.getContext('2d');
	canvas.width = 700;
	canvas.height = 300;
	canvas.margin = '1em';
	canvas.display = 'block';
	document.body.appendChild(canvas);

	// audio stuff
	var audio = new Audio();
	var audioSrc = 'http://ia601007.us.archive.org/18/items/NodeUp54_20131107/NodeUp54.mp3';
	audio.src = audioSrc;
	audio.controls = true;
	audio.autoplay = true;
	document.body.appendChild(audio);

	// analyser stuff
	var context = new webkitAudioContext();
	var analyser = context.createAnalyser();
	analyser.fftSize = 2048;

	// connect the stuff up to eachother
	var source = context.createMediaElementSource(audio);
	source.connect(analyser);
	analyser.connect(context.destination);


	// draw the analyser to the canvas
	function freqAnalyser() {;
	var sum;
	var average;
	var bar_width;
	var scaled_average;
	var num_bars = 60;
	var data = new Uint8Array(2048);
	analyser.getByteFrequencyData(data);

	// clear canvas
	canvas_context.clearRect(0, 0, canvas.width, canvas.height);
	var bin_size = Math.floor(data.length / num_bars);
	for (var i = 0; i < num_bars; i += 1) {
	sum = 0;
	for (var j = 0; j < bin_size; j += 1) {
	sum += data[(i * bin_size) + j];
	}
	average = sum / bin_size;
	bar_width = canvas.width / num_bars;
	scaled_average = (average / 256) * canvas.height;
	canvas_context.fillRect(i * bar_width, canvas.height, bar_width - 2, - scaled_average);
	}
	}

	// draw another analyser frame to canvas
	setInterval(freqAnalyser, 60);
	<!DOCTYPE html>
	<html class="no-js">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Audio to Canvas</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	#c {
	display : block;
	margin : 1em;
	}
	</style>
	</head>
	<body>
	<!--[if lt IE 8]>
	<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
	<![endif]-->
	<h1>Fun with HTML5 Audio</h1>
	</body>
	</html>