Upload recorded audio to firebase storage #13

src/js/index.js

@@ -282,7 +282,9 @@ const sfx = {};
 	});
 });
 
-const puppetShow = new PuppetShow();
+const puppetShow = new PuppetShow({
+	audioContext
+});
 puppetShow
 	.on('load', () => {
 		console.log('loaded puppet show', puppetShow.id);
@@ -344,6 +346,8 @@ puppetShowRecorder
 	.on('reset', () => {
 		recordButton.innerHTML = 'Record';
 	});
+// todo: don't enable record button until puppetShow has loaded
+// todo: if puppetShow already has data, skip recording
 
 recordButton.addEventListener('click', () => {
 	if (puppetShowRecorder.recording) {

src/js/puppet-show-recorder.js

@@ -131,6 +131,10 @@ function PuppetShowRecorder(options) {
 		audioRecorder.stop();
 
 		// todo: save audio asset to puppetShow if not being cleared?
+		audioRecorder.exportWAV(blob => {
+			// todo: add time when we allow appending
+			puppetShow.addAudio(blob);
+		});
 
 		this.emit('stop');
 	};

src/js/puppet-show.js

@@ -35,7 +35,12 @@ firebase.initializeApp({
 
 const showsRef = firebase.database().ref('shows');
 
-function PuppetShow() {
+const storage = firebase.storage();
+const audioStorageRef = storage.ref().child('audio');
+
+function PuppetShow(options) {
+	const {audioContext} = options;
+
 	let showId = '';
 	let showRef = null;
 	let title = '';
@@ -45,7 +50,17 @@ function PuppetShow() {
 	- set/get methods for metadata (arbitrary key/value)
 	- methods for reading/creating/deleting events
 	- method for full reset/erase (should have confirmation in UI)
+	- track status of unsaved data and fire events accordingly
+	*/
+
+	/*
+	Audio assets stored as decoded buffers.
+	Each audio asset has a start time
+	For now, we don't foresee the need for other types of assets
+
+	maybe this is fine as a set?
 	*/
+	const audioAssets = new Map();
 
 	eventEmitter(this);
 
@@ -133,6 +148,58 @@ function PuppetShow() {
 		*/
 	};
 
+	this.addAudio = (encodedBlob, time) => {
+		if (!loaded) {
+			// todo: either wait to finish loading or throw error
+			return;
+		}
+
+		if (!time) {
+			time = 0;
+		}
+
+		const id = showRef.child('audio').push().key;
+		const assetRef = showRef.child('audio/' + id);
+		assetRef.set(time);
+
+		const audioObject = {
+			buffer: null,
+			time,
+			id
+		};
+
+		// todo: update ready-to-play state?
+
+		audioAssets.set(id, audioObject);
+
+		// todo: Decode and add to audioObject.buffer
+		const fileReader = new FileReader();
+		fileReader.onloadend = () => {
+			audioContext.decodeAudioData(fileReader.result).then(decodedData => {
+				audioObject.buffer = decodedData;
+				// todo: set up audio source or whatever
+				console.log('decoded audio');
+			});
+		};
+		fileReader.readAsArrayBuffer(encodedBlob);
+
+		/*
+		todo: monitor upload status
+		- see https://firebase.google.com/docs/storage/web/upload-files#manage_uploads
+		- cancel upload if puppetShow gets cleared before it's done
+		- fire event when file complete
+		- fire event when all pending uploads are complete
+		- do not cancel upload if a new show is loaded
+		- report error. Maybe try again?
+		*/
+		const audioFileRef = audioStorageRef.child(id + '.wav');
+		audioFileRef.put(encodedBlob).then(snapshot => {
+			console.log('saved audio file', id, snapshot);
+		});
+
+		// todo: add to list of events
+	};
+
 	Object.defineProperties(this, {
 		id: {
 			get: () => showId