Bars Visualization

Visualize.js

window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext; 

window.onload = function () {

	var canvas = document.getElementById('c'), //initialize for Canvas
		c = canvas.getContext('2d'),
		cw = canvas.width,
		ch = canvas.height, //get height and width
		audiosource = document.getElementById('audio'),
		lenght = audiosource.duration * 30, //we need the audio duration to know for how long the animation should be captured - 30 FPS
		ticker = 0, //frame identifier
		bar = [], //animations
		clrs; //colors

	audiosource.play();

	var context = new webkitAudioContext(),
		source = context.createMediaElementSource(audiosource),
		analyser = context.createAnalyser(),
		twopit = 2 * Math.PI,
		centerw = cw / 2,
		centerh = ch / 2,
		radius = 300;

	source.connect(analyser);
	analyser.connect(context.destination);

	var frequencyData = new Uint8Array(analyser.frequencyBinCount);
	analyser.getByteFrequencyData(frequencyData);
	analyser.fftSize = 512;

	for (var a = 0; a < analyser.fftSize / 2; a++) {

		d = a / 40.7436654315;

		bar.push({
			w: 2,
			x: centerw + (radius * Math.cos(d)), //left/right
			y: centerh + (radius * Math.sin(d)), //up/down
			rot: (a * 1.40625) * (Math.PI / 180)
		})

	};

	function visualize() {
		requestAnimationFrame(visualize);
		analyser.getByteFrequencyData(frequencyData);

		var cx,
			cy;

		for (var i = 0; i < analyser.fftSize / 2; i++) {

			cx = bar[i].x + 0.5 * ((frequencyData[i] / 512) * 100);
			cy = bar[i].y + 0.5 * bar[i].w;

			c.translate(cx, cy);
			c.rotate(bar[i].rot);
			c.translate(-cx, -cy);
			c.fillRect(bar[i].x, bar[i].y, bar[i].w, -(frequencyData[i] / 512) * 100);
			c.clearRect(bar[i].x, bar[i].y - (frequencyData[i] / 512) * 100, bar[i].w + 3, -(frequencyData[i] / 512) * 100);

		};
	};

	visualize();
};