Music Makes You Travel

index.html

<a href="" target=""><canvas id="sketch"></canvas></a>

music-makes-you-travel.markdown

Music Makes You Travel

Calligraphic landscapes generated through audio ananlysis using FFT in WebAudio API.

A Pen by Lionel Radisson on CodePen.

License.

script.js

/*
 * Music Makes You Travel by Lionel Radisson // Makio135 is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
 * http://creativecommons.org/licenses/by-nc-sa/4.0/
 *
 * Based on my processing experiment at openprocessing.org/sketch/138877
 */

(function(d, w, u) {
	// check if the default naming is enabled, if not use the chrome one.
	if (!w.AudioContext) {
		if (!w.webkitAudioContext) {
			alert('no audiocontext found');
		}
		w.AudioContext = w.webkitAudioContext;
	}

	var canvas = d.getElementById("sketch"),
		ctx = canvas.getContext("2d"),
		width = w.innerWidth,
		height = w.innerHeight;

	var audioContext, analyserNode, javascriptNode, sourceNode,
		bufferSize = 512,
		frequencies = [];

	var tracks = [],
		musicUrl, artistName, musicName, info;

	var frameCount = 0,
		img = new Image(),
		Y = -100,
		echelle,
		sensib = 1.5,
		step = 2;

	function setup() {
		canvas.width = width;
		canvas.height = height;
		echelle = width / bufferSize;

		ctx.fillStyle = "#000";
		ctx.fillRect(0, 0, width, height);

		ctx.strokeStyle = "rgba( 255, 255, 255, 0.1 )";

		setupAudio(bufferSize);
		//loadSound("http://crossorigin.me/http://audio.ngfiles.com/152000/152047_ParagonX9___Chaoz_Impact.mp3");
		loadSound("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/new_year_dubstep_minimix.ogg");
		// loadSound("//katiebaca.com/tutorial/odd-look.mp3");
	}

	function draw() {
		w.requestAnimationFrame(draw);
		
		if (frameCount % 3 == 0) {
			if (frameCount > 6) ctx.drawImage(img, 0, -2);
			
			if (frameCount % 1200 == 0){
				ctx.fillStyle = "#000";
				ctx.fillRect(0, 0, width, height);
			}

			ctx.fillStyle = "#000";
			ctx.beginPath();
			ctx.moveTo(0, Y + frequencies[0] * sensib);
			for (var i = step; i < bufferSize; i += step) {
				ctx.lineTo(i * echelle, Y + frequencies[i] * sensib);
			}
			ctx.lineTo(width, Y + 400);
			ctx.lineTo(0, Y + 400);
			ctx.closePath();
			ctx.fill();

			for (var i = 1; i < bufferSize - step; i += step) {
				ctx.beginPath();
				ctx.moveTo(i * echelle, Y + frequencies[i] * sensib);
				ctx.lineTo(i + step, Y + frequencies[i + step] * sensib);
				ctx.stroke();
			}

			img.src = d.getElementById("sketch").toDataURL("image/jpeg", 0.95);

			if (info != undefined) {
				ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
				ctx.fillRect(5, height - 30, width - 10, 20);

				ctx.fillStyle = "rgba(150, 150, 150, 1)";
				ctx.fillText(info, 10, height - 15);
			}

			if (Y < height - 300) {
				Y += 2;
			}
		}

		frameCount++;
	}

	function setupAudio(buffSize) {
		audioContext = new AudioContext();

		javascriptNode = audioContext.createScriptProcessor(2048, 1, 1);
		javascriptNode.connect(audioContext.destination);

		javascriptNode.onaudioprocess = function() {
			var array = new Uint8Array(analyserNode.frequencyBinCount);
			analyserNode.getByteTimeDomainData(array);
			frequencies = array;
		}

		analyserNode = audioContext.createAnalyser();
		analyserNode.smoothingTimeConstant = 0.3;
		analyserNode.fftSize = buffSize * 2;

		// create a buffer source node
		sourceNode = audioContext.createBufferSource();
		sourceNode.onended = setup;
		sourceNode.connect(analyserNode);
		analyserNode.connect(javascriptNode);

		sourceNode.connect(audioContext.destination);
	}

	// load the specified sound
	function loadSound(url) {
		var request = new XMLHttpRequest();
		request.open('GET', url, true);
		request.responseType = 'arraybuffer';

		// When loaded decode the data
		request.onload = function() {

			// decode the data
			audioContext.decodeAudioData(request.response, function(buffer) {
				// when the audio is decoded play the sound
				playSound(buffer);
			}, onError);
		}
		request.send();
	}

	function playSound(buffer) {
		sourceNode.buffer = buffer;
		sourceNode.start(0);
	}

	// log if an error occurs
	function onError(e) {
		console.log(e);
	}

	setup();
	draw();
})(document, window, undefined);

style.css

canvas{
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}