started soundscene template with css

lshap · Feb 20, 2014 · 8ac3e88 · 8ac3e88
1 parent e250d06
commit 8ac3e88
Show file tree

Hide file tree

Showing 7 changed files with 432 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.soundscene.css.swp b/.soundscene.css.swp
diff --git a/.soundscene.html.swp b/.soundscene.html.swp
diff --git a/.testFilters.html.swp b/.testFilters.html.swp
diff --git a/soundscene.css b/soundscene.css
@@ -0,0 +1,13 @@
+#dragDiv {
+	position:relative;
+	margin-left:40%;
+	margin-right:40%;
+	margin-top:30%;
+	width:300px;
+}
+
+span {
+	font-family: "Helvetica Neue", Arial, sans-serif;
+	font-size: 30px;
+
+}
diff --git a/soundscene.html b/soundscene.html
@@ -0,0 +1,114 @@
+
+<!DOCTYPE HTML>
+<html>
+	<head>
+
+		<link rel="stylesheet" type="text/css" href="soundscene.css"/>
+		<script type="text/javascript" src="js/pitch.js"></script>
+		<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
+		<script src="js/jquery-1.11.0.min.js"></script>
+		<script type="text/javascript">
+			var audioContext;
+			var audioSource;
+			var analyser;
+			var freqDomain;
+			var timeDomain;
+			var canvas;
+			var ctxt;
+			var GRID_WIDTH = 32;
+			var GRID_HEIGHT = 32;
+			var SAMPLE_MAX = 256;
+			var WIDTH = window.innerWidth;
+			var HEIGHT = window.innerHeight;
+
+			init();
+			function init() {
+				canvas = document.getElementById('canvas'); 
+				ctxt = canvas.getContext('2d');	
+				canvas.width = WIDTH;
+				canvas.height = HEIGHT;
+
+				try {
+					// Fix up for prefixing
+					window.AudioContext = window.AudioContext
+							      ||window.webkitAudioContext;
+					 audioContext = new AudioContext();
+				}
+				 catch(e) {
+					alert('Web Audio API is not supported in this browser');
+				}
+
+				ctxt.strokeRect(0, 0, canvas.width, canvas.height);	
+			}
+
+			// load sound from input mp3
+			function loadSound() {
+				var file = $("#soundIn").get(0).files[0];
+				var reader = new FileReader();
+				reader.onload = function(e) {
+					var buff = e.target.result;
+					playSound(buff);
+				}				
+
+				reader.readAsArrayBuffer(file);
+			}
+
+			function analyzeSound() {
+				requestAnimationFrame(analyzeSound);
+				ctxt.clearRect(0,0, WIDTH, HEIGHT);
+				console.log('analyzing...');
+				var timeDomain = new Uint8Array(analyser.frequencyBinCount);
+				analyser.getByteTimeDomainData(timeDomain);
+
+				var freqDomain = new Float32Array(analyser.frequencyBinCount);
+				analyser.getFloatFrequencyData(freqDomain);
+				for (var freq = 0; freq < freqDomain.length; freq++) {
+					var x = Math.floor(freq % GRID_WIDTH) * WIDTH/GRID_WIDTH + 10;
+					var y = Math.floor(freq / GRID_WIDTH) * HEIGHT/GRID_HEIGHT + 10;
+					var amp = freqDomain[freq];
+					var r = Math.abs(amp/SAMPLE_MAX) * 10;
+
+					var grd = ctxt.createRadialGradient(x, y, r/2, x, y, r);
+					grd.addColorStop(0, "red");	
+					grd.addColorStop(0, "blue");	
+
+
+					// ctxt.fillStyle = '#FF0000';
+					ctxt.fillStyle = grd;
+
+					ctxt.beginPath();
+					ctxt.arc(x, y, r, 0, Math.PI * 2);
+					ctxt.fill();
+				}
+			}
+
+			// play sound from ArrayBuffer
+			function playSound(buffer) {
+				// disconnect if there is already a song uploaded
+				if (audioSource) {
+					audioSource.stop();
+					audioSource.disconnect(0);
+				}
+
+				audioSource = audioContext.createBufferSource();
+				audioSource.buffer = audioContext.createBuffer(buffer,false);
+
+				// set up the AudioAnalserNode
+				analyser = audioContext.createAnalyser();
+				audioSource.connect(analyser);
+
+				analyser.connect(audioContext.destination);
+				audioSource.connect(audioContext.destination);
+
+				audioSource.start(0);
+				analyzeSound();
+			}		
+
+		</script>
+	</head>
+
+	<body>
+		<div id="dragDiv"><span> drag sound here </span></div>
+		<canvas id="canvas"></canvas>
+	</body>
+</html>