A basic audio visualization using only js

basic-vis.html

<script type="text/javascript" src='http://code.jquery.com/jquery-2.1.3.min.js'></script>
<audio id="myAudio" src="http://sqr.bartekdrozdz.com/demo/soundviz/assets/spy.mp3" controls><p>Your browser does not support the audio element.</p></audio>
<!-- <audio id="myAudio" src="./a-little-something.mp3" controls><p>Your browser does not support the audio element.</p></audio> -->

<div id="visualization" style="width:100%; height:500px"></div>

<script type="text/javascript">
	Number.prototype.map = function ( in_min , in_max , out_min , out_max ) {
		return ( this - in_min ) * ( out_max - out_min ) / ( in_max - in_min ) + out_min;
	}
	window.AudioContext = window.AudioContext||window.webkitAudioContext;

	var mainContainer = $("#visualization");
	var barWidth = mainContainer.width() / 1024;
	var unitHeight = mainContainer.height() / 255;
	console.log(unitHeight);
	var bars = [];
	// create 1024 bars
	for(var i = 0 ; i < 1024 ; i++) {
		mainContainer.append("<div class='bar' />");
		bars.push($(".bar:eq(" + i + ")", mainContainer));
		bars[i].css({
			"position":"absolute",
			"left": i * barWidth,
			"bottom": 0,
			"height": 0, // i.map(0, 1024, 0, 255 * unitHeight),
			"width":barWidth,
			"background":"black"
		});
	}

	$(function() {
		
		var ctx = new AudioContext();
		var audio = document.getElementById('myAudio');
		var audioSrc = ctx.createMediaElementSource(audio);
		audioSrc.connect(ctx.destination);
		var analyser = ctx.createAnalyser();
		// we have to connect the MediaElementSource with the analyser 
		audioSrc.connect(analyser);
		// we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)

		// frequencyBinCount tells you how many values you'll receive from the analyser
		var frequencyData = new Uint8Array(analyser.frequencyBinCount);

		// we're ready to receive some data!
		// loop
		function renderFrame() {
			requestAnimationFrame(renderFrame);
			// update data in frequencyData
			analyser.getByteFrequencyData(frequencyData);
			// render frame based on values in frequencyData
			for(var f in frequencyData) {
				bars[f].height(frequencyData[f] * unitHeight);
			}
		}
		audio.play();
		renderFrame();
	});
</script>

cool organic thing.js

<script type="text/javascript" src='http://code.jquery.com/jquery-2.1.3.min.js'></script>
<script type="text/javascript" src='perlin.js'></script>
<audio id="myAudio" src="http://sqr.bartekdrozdz.com/demo/soundviz/assets/spy.mp3" controls><p>Your browser does not support the audio element.</p></audio>
<!-- <audio id="myAudio" src="./pablo.mp3" controls><p>Your browser does not support the audio element.</p></audio> -->

<canvas id="visualization"></canvas>
 
<script type="text/javascript">
	Number.prototype.map = function ( in_min , in_max , out_min , out_max ) {
		return ( this - in_min ) * ( out_max - out_min ) / ( in_max - in_min ) + out_min;
	}
	window.AudioContext = window.AudioContext||window.webkitAudioContext;

	$("#visualization").css({
		"height":"100%",
		"width":"100%",
		"position":"fixed",
		"top":"0",
		"left":"0"
	});

	var modulous = 2;
	var rscale = 500;
	var mainContainer = $("#visualization");
	mainContainer.attr("height", mainContainer.height());
	mainContainer.attr("width", mainContainer.width());
	var center = { x: mainContainer.width() / 2.0, y: mainContainer.height() / 2.0 };
	var size = { width:mainContainer.width(), height: mainContainer.height() };

	$(window).on("resize", function(){
		mainContainer.attr("height", mainContainer.height());
		mainContainer.attr("width", mainContainer.width());
		center = { x: mainContainer.width() / 2.0, y: mainContainer.height() / 2.0 };
		size = { width:mainContainer.width(), height: mainContainer.height() };
	});

	var canvas = document.getElementById("visualization");
	var gctx = canvas.getContext("2d");

	$(function() {
		noise.seed(Math.random());
		var ctx = new AudioContext();
		var audio = document.getElementById('myAudio');
		var audioSrc = ctx.createMediaElementSource(audio);
		audioSrc.connect(ctx.destination);
		var analyser = ctx.createAnalyser();
		audioSrc.connect(analyser);
		var frequencyData = new Uint8Array(analyser.frequencyBinCount);

		// Animation loop
		var time = 0;
		function renderFrame() {
			requestAnimationFrame(renderFrame);

			time++;
			// clear the screen
			gctx.restore();
			gctx.fillStyle = "rgb(0, 0, 0)";
			gctx.fillRect(0,0, size.width, size.height);

			// update data in frequencyData
			analyser.getByteFrequencyData(frequencyData);

			// render frame based on values in frequencyData
			for(var f in frequencyData) {
				gctx.save();
				f = parseFloat(f);
				if(f % modulous === 0) {
					var width = f.map(0, 1024, 0, size.width);
					var height = f.map(0, 1024, 0, size.height);
					gctx.fillStyle = "rgba(0,0,0,0)";
					var r = frequencyData[f].map(  0, 255,   0, 64);
					var g = frequencyData[f].map(  0, 255, 255, 128); 
					var b = frequencyData[f].map(  0, 255, 255, 64);
					var a = frequencyData[f].map(  0, 255,   0,   1);
					var angle = Math.floor(f % 360);

					gctx.translate( center.x, center.y );
					var sv = time / rscale;
					var nval = noise.simplex2( (time - (f*sv)) / rscale, 1 );
					gctx.rotate(nval.map(0,1,0,45) * Math.PI/180);
					gctx.strokeStyle = "rgba("+r.toFixed(0)+","+g.toFixed(0)+","+b.toFixed(0)+","+a+")";
					gctx.strokeRect( -(width / 2.0), -(height / 2.0), width, height );
					gctx.restore();
				}
			}
		}

		// play the audio and start the animation
		audio.play();
		renderFrame();
	});
</script>

squares.html

<script type="text/javascript" src='http://code.jquery.com/jquery-2.1.3.min.js'></script>
<audio id="myAudio" src="http://sqr.bartekdrozdz.com/demo/soundviz/assets/spy.mp3" controls><p>Your browser does not support the audio element.</p></audio>
<!-- <audio id="myAudio" src="./pablo.mp3" controls><p>Your browser does not support the audio element.</p></audio> -->

<canvas id="visualization"></canvas>
 
<script type="text/javascript">
	Number.prototype.map = function ( in_min , in_max , out_min , out_max ) {
		return ( this - in_min ) * ( out_max - out_min ) / ( in_max - in_min ) + out_min;
	}
	window.AudioContext = window.AudioContext||window.webkitAudioContext;

	$("#visualization").css({
		"height":"100%",
		"width":"100%",
		"position":"fixed",
		"top":"0",
		"left":"0"
	});

	var modulous = 2;
	var mainContainer = $("#visualization");
	mainContainer.attr("height", mainContainer.height());
	mainContainer.attr("width", mainContainer.width());
	var center = { x: mainContainer.width() / 2.0, y: mainContainer.height() / 2.0 };
	var size = { width:mainContainer.width(), height: mainContainer.height() };

	$(window).on("resize", function(){
		mainContainer.attr("height", mainContainer.height());
		mainContainer.attr("width", mainContainer.width());
		center = { x: mainContainer.width() / 2.0, y: mainContainer.height() / 2.0 };
		size = { width:mainContainer.width(), height: mainContainer.height() };
	});

	var canvas = document.getElementById("visualization");
	var gctx = canvas.getContext("2d");

	$(function() {
		var ctx = new AudioContext();
		var audio = document.getElementById('myAudio');
		var audioSrc = ctx.createMediaElementSource(audio);
		audioSrc.connect(ctx.destination);
		var analyser = ctx.createAnalyser();
		audioSrc.connect(analyser);
		var frequencyData = new Uint8Array(analyser.frequencyBinCount);

		// console.log(size, center);

		// Animation loop
		function renderFrame() {
			requestAnimationFrame(renderFrame);

			// clear the screen
			gctx.rotate(0);
			gctx.fillStyle = "rgb(0, 0, 0)";
			gctx.fillRect(0,0,size.width, size.height);

			// update data in frequencyData
			analyser.getByteFrequencyData(frequencyData);

			// render frame based on values in frequencyData
			for(var f in frequencyData) {
				f = parseFloat(f);
				if(f % modulous === 0) {
					var width = f.map(0, 1024, size.width, 0);
					var height = f.map(0, 1024, size.height, 0);
					gctx.fillStyle = "rgba(0,0,0,0)";
					var r = frequencyData[f].map(  0, 255,   0, 128);
					var g = frequencyData[f].map(  0, 255, 255, 128); 
					var b = frequencyData[f].map(  0, 255, 255, 128);
					var a = frequencyData[f].map(  0, 255,   0,   1);
					gctx.strokeStyle = "rgba("+r.toFixed(0)+","+g.toFixed(0)+","+b.toFixed(0)+","+a+")";
					gctx.strokeRect( center.x - (width / 2.0), center.y - (height / 2.0), width, height );
				}
			}
		}

		// play the audio and start the animation
		audio.play();
		renderFrame();
	});
</script>