Play sound effects #10

- Load sounds as buffers via XHR
- Generate buttons (temp style pending #8)
- Play sound when button pushed
- Temp sounds pending #6

src/html/index.html

@@ -30,6 +30,17 @@
 			z-index: 1;
 			background: white;
 		}
+
+		/*
+		todo: nicer layout and design. see #8;
+		*/
+		#sound-effects {
+			position: absolute;
+			margin: auto;
+			bottom: 10%;
+			padding: 10px;
+			z-index: 1;
+		}
 		</style>
 	</head>
 
@@ -41,6 +52,8 @@
 			<!-- <button id="reset">Reset</button> -->
 		</div>
 
+		<div id="sound-effects">
+		</div>
 	</body>
 
 	{% for script in scripts -%}

src/js/index.js

@@ -17,6 +17,8 @@ require('imports?THREE=three!three/examples/js/loaders/OBJLoader');
 require('imports?THREE=three!three/examples/js/loaders/MTLLoader');
 require('imports?THREE=three!three/examples/js/vr/ViveController');
 
+import SoundEffect from './sound-effect';
+
 // Setup three.js WebGL renderer. Note: Antialiasing is a big performance hit.
 // Only enable it if you actually need to.
 const renderer = new THREE.WebGLRenderer({
@@ -253,6 +255,27 @@ light.shadow.camera.near = 1;
 
 scene.add(new THREE.AmbientLight(0x666666));
 
+/*
+Set up sound effects
+todo: provide multiple formats
+todo: wake up audio context on first touch event on mobile
+*/
+const AudioContext = window.AudioContext || window.webkitAudioContext;
+const audioContext = new AudioContext();
+const sfx = {};
+[
+	'sounds/bark.wav',
+	'sounds/laugh.wav'
+].forEach(src => {
+	const key = src.replace(/^.*\/([a-z]+)\.wav/, '$1');
+	sfx[key] = new SoundEffect({
+		src,
+		buttonContainer: '#sound-effects',
+		context: audioContext,
+		name: key
+	});
+});
+
 // Request animation frame loop function
 let vrDisplay = null;
 let lastRender = 0;

src/js/sound-effect.js

@@ -0,0 +1,75 @@
+'use strict';
+
+function SoundEffect(options) {
+	const buttonContainer = typeof options.buttonContainer === 'string' ?
+		document.querySelector(options.buttonContainer) :
+		options.buttonContainer;
+
+	const src = options.src;
+	const context = options.context;
+
+	let buffer = null;
+
+	const sources = [];
+
+	// load audio file
+	// todo: load appropriate format based on browser support
+	const xhr = new XMLHttpRequest();
+	xhr.responseType = 'arraybuffer';
+	xhr.onload = () => {
+		context.decodeAudioData(xhr.response, decodedBuffer => {
+			buffer = decodedBuffer;
+			console.log('loaded buffer', src, buffer);
+		});
+	};
+	xhr.onerror = e => {
+		// keep trying
+		console.warn('Error loading audio', src, e);
+	};
+	xhr.open('GET', src, true);
+	xhr.send();
+
+	let stopSource;
+	function stopEvent(evt) {
+		stopSource(evt.target);
+	}
+
+	stopSource = function (source) {
+		try {
+			source.removeEventListener('ended', stopEvent);
+			source.disconnect(context.destination);
+			source.stop(0);
+		} catch (e) {}
+		const i = sources.indexOf(source);
+		if (i >= 0) {
+			sources.splice(i, 1);
+		}
+	};
+
+	this.play = () => {
+		if (buffer) {
+			const source = context.createBufferSource();
+			source.buffer = buffer;
+			source.connect(context.destination);
+			source.addEventListener('ended', stopEvent);
+			source.start(0);
+			sources.push(source);
+		}
+	};
+
+	this.stop = () => {
+		while (sources.length) {
+			stopSource(sources[0]);
+		}
+	};
+
+	/*
+	Use better-looking button design #8
+	*/
+	const button = document.createElement('button');
+	button.appendChild(document.createTextNode(options.name || 'Sound'));
+	button.addEventListener('click', this.play);
+	buttonContainer.appendChild(button);
+}
+
+export default SoundEffect;