1 files changed, 129 insertions, 0 deletions
diff --git a/xp/vco/scripts/app.js b/xp/vco/scripts/app.js
new file mode 100644
index 0000000..cec78be
--- /dev/null
+++ b/xp/vco/scripts/app.js
@@ -0,0 +1,129 @@
+// fork getUserMedia for multiple browser versions, for those
+// that need prefixes
+
+navigator.getUserMedia = (navigator.getUserMedia ||
+						navigator.webkitGetUserMedia ||
+						navigator.mozGetUserMedia ||
+						navigator.msGetUserMedia);
+
+// set up forked web audio context, for multiple browsers
+// window. is needed otherwise Safari explodes
+
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var source;
+var stream;
+
+// grab the mute button to use below
+
+var mute = document.querySelector('.mute');
+
+//set up the different audio nodes we will use for the app
+
+var analyser = audioCtx.createAnalyser();
+analyser.minDecibels = -90;
+analyser.maxDecibels = -10;
+analyser.smoothingTimeConstant = 0.85;
+
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+var convolver = audioCtx.createConvolver();
+
+// set up canvas context for visualizer
+
+var canvas = document.querySelector('.visualizer');
+var canvasCtx = canvas.getContext("2d");
+var bar = document.getElementById("bar");
+var intendedWidth = document.querySelector('.wrapper').clientWidth;
+
+canvas.setAttribute('width',intendedWidth*2);
+canvas.style.width=intendedWidth+'px';
+
+
+var drawVisual;
+
+//main block for doing the audio recording
+
+if (navigator.getUserMedia) {
+console.log('getUserMedia supported.');
+navigator.getUserMedia (
+	// constraints - only audio needed for this app
+	{
+		audio: true
+	},
+
+	// Success callback
+	function(stream) {
+		source = audioCtx.createMediaStreamSource(stream);
+		source.connect(analyser);
+		analyser.connect(distortion);
+		distortion.connect(biquadFilter);
+		biquadFilter.connect(convolver);
+		convolver.connect(gainNode);
+		gainNode.connect(audioCtx.destination);
+
+		visualize();
+
+	},
+
+	// Error callback
+	function(err) {
+		console.log('The following gUM error occured: ' + err);
+	}
+);
+} else {
+console.log('getUserMedia not supported on your browser!');
+}
+
+function visualize() {
+	WIDTH = canvas.width;
+	HEIGHT = canvas.height;
+	analyser.fftSize = 2048;
+	var bufferLength = analyser.fftSize;
+	console.log(bufferLength);
+	var dataArray = new Uint8Array(bufferLength);
+
+	canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+	var draw = function() {
+
+		drawVisual = requestAnimationFrame(draw);
+
+		analyser.getByteTimeDomainData(dataArray);
+
+		canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+		canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+		canvasCtx.lineWidth = 2;
+		canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+		canvasCtx.beginPath();
+
+		var sliceWidth = WIDTH * 1.0 / bufferLength;
+		var x = 0, s = 0;
+
+		for(var i = 0; i < bufferLength; i++) {
+
+		var v = dataArray[i] / 128.0;
+		var t=Math.abs(dataArray[i]-128.)/128.0;
+		s+=t*t;
+		var y = v * HEIGHT/2;
+
+		if(i === 0) {
+			canvasCtx.moveTo(x, y);
+		} else {
+			canvasCtx.lineTo(x, y);
+		}
+
+		x += sliceWidth;
+		}
+		s/=bufferLength;s=Math.sqrt(s);s=1-s;
+		bar.style.width=100*s+'%';
+
+		canvasCtx.lineTo(canvas.width, canvas.height/2);
+		canvasCtx.stroke();
+	};
+
+	draw();
+
+}