Record audio event #10, #4

- Move button creation out of `SoundEffect`

src/js/index.js

@@ -268,19 +268,6 @@ 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
-	});
-});
 
 const puppetShow = new PuppetShow({
 	audioContext
@@ -329,6 +316,37 @@ const puppetShowRecorder = new PuppetShowRecorder({
 
 const timecode = document.getElementById('timecode');
 
+const soundButtonContainer = document.querySelector('#sound-effects');
+const sfx = [];
+[
+	'sounds/bark.wav',
+	'sounds/laugh.wav'
+].forEach(src => {
+	const name = src.replace(/^.*\/([a-z]+)\.wav/, '$1');
+	const effect = new SoundEffect({
+		src,
+		context: audioContext,
+		name
+	});
+	sfx.push(effect);
+
+	/*
+	todo: Use better-looking button design #8
+	*/
+	const button = document.createElement('button');
+	button.appendChild(document.createTextNode(name || 'Sound'));
+	soundButtonContainer.appendChild(button);
+
+	button.addEventListener('click', () => {
+		effect.play();
+		if (puppetShowRecorder.recording) {
+			puppetShowRecorder.recordEvent('sound', {
+				name
+			});
+		}
+	});
+});
+
 const recordButton = document.getElementById('record');
 recordButton.disabled = true;
 puppetShowRecorder
@@ -341,13 +359,15 @@ puppetShowRecorder
 	})
 	.on('start', () => {
 		recordButton.innerHTML = 'Stop';
+		sfx.forEach(e => e.stop());
 	})
 	.on('stop', () => {
 		recordButton.innerHTML = 'Reset';
 	})
 	.on('reset', () => {
 		recordButton.innerHTML = 'Record';
 		timecode.innerText = '0';
+		sfx.forEach(e => e.stop());
 	});
 // todo: don't enable record button until puppetShow has loaded
 // todo: if puppetShow already has data, skip recording

src/js/puppet-show-recorder.js

@@ -158,6 +158,14 @@ function PuppetShowRecorder(options) {
 		this.emit('reset');
 	};
 
+	this.recordEvent = (eventType, params, time) => {
+		if (recording || isNaN(time)) {
+			time = this.currentTime;
+		}
+
+		puppetShow.addEvent(eventType, params, time);
+	};
+
 	// todo: query recording devices
 	// todo: select audio recording device
 

src/js/puppet-show.js

@@ -163,6 +163,7 @@ function PuppetShow(options) {
 
 		// erasing all media assets
 		audioAssets.clear();
+		showRef.child('events').remove();
 		showRef.child('audio').remove();
 		audioAssetsRef.delete()
 			.then(() => console.log('deleted audio files'))
@@ -173,6 +174,18 @@ function PuppetShow(options) {
 		*/
 	};
 
+	this.addEvent = (type, params, time) => {
+		if (!showRef) {
+			return;
+		}
+
+		showRef.child('events').push({
+			time,
+			type,
+			params
+		});
+	};
+
 	this.addAudio = (encodedBlob, time) => {
 		if (!loaded) {
 			// todo: either wait to finish loading or throw error

src/js/sound-effect.js

@@ -1,10 +1,6 @@
 '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;
 
@@ -63,13 +59,7 @@ function SoundEffect(options) {
 		}
 	};
 
-	/*
-	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);
+	this.name = options.name || 'Sound';
 }
 
 export default SoundEffect;