Wired up file selector input to web patch

Author: smrq

WebSource/patch.html

@@ -10,9 +10,14 @@
     <div class="center">
       <h1>OWL Patch</h1>
       <h2>Input select</h2>
-      <div>
+      <div class="input-select no-input">
         <input type="button" onclick="patch.clearInput(); return false;" value="No input"/>
         <input type="button" onclick="patch.useMicrophoneInput(); return false;" value="Microphone"/>
+        <input type="button" onclick="patch.useFileInput(); return false;" value="File"/>
+        <div class="file-input-controls">
+          <input type="file" id="file-input-selector" onchange="patch.onFileSelect(this.files)" />
+          <audio id="file-input-audio" controls></audio>
+        </div>
       </div>
       <h2>Diagnostics</h2>
       <div>
@@ -44,8 +49,9 @@ <h2>Diagnostics</h2>
       document.getElementById("p2").innerHTML = "<h3>"+patch.getParameterName(1)+"</h3>";
       document.getElementById("p3").innerHTML = "<h3>"+patch.getParameterName(2)+"</h3>";
       document.getElementById("p4").innerHTML = "<h3>"+patch.getParameterName(3)+"</h3>";
-      <!-- patch.update("Volume", 0.1); -->
-      <!-- patch.play(); -->
+
+      // patch.update("Volume", 0.1);
+      // patch.play();
       var getMessage = function(){
           var msg = patch.getMessage();
           if(msg)

WebSource/webaudio.js

@@ -12,10 +12,10 @@ if (!owl.context)
 }
 
 // Cross-browser compatibility for getUserMedia
-navigator.getUserMedia = (navigator.getUserMedia ||
-                          navigator.webkitGetUserMedia ||
-                          navigator.mozGetUserMedia ||
-                          navigator.msGetUserMedia);
+navigator.getUserMedia = navigator.getUserMedia ||
+	navigator.webkitGetUserMedia ||
+	navigator.mozGetUserMedia ||
+	navigator.msGetUserMedia;
 
 var WEB_setup = Module.cwrap('WEB_setup', 'number', ['number', 'number']);
 var WEB_processBlock = Module.cwrap('WEB_processBlock', 'number', ['number', 'number']);
@@ -28,7 +28,9 @@ var WEB_getStatus = Module.cwrap('WEB_getStatus', 'string', []);
 owl.dsp = function () {
 	var that = {};
 	that.model = {
-		inputNode: null
+		inputNode: null,
+		fileNode: owl.context.createMediaElementSource(document.getElementById('file-input-audio')),
+		micNode: null
 	};
 	that.vectorsize = 2048;      
 	console.log("setup[fs "+owl.context.sampleRate+"][bs "+that.vectorsize+"]");
@@ -94,12 +96,26 @@ owl.dsp = function () {
 	}
 
 	that.useMicrophoneInput = function () {
-		navigator.getUserMedia.call(navigator, {audio: true}, function (stream) {
-			var node = owl.context.createMediaStreamSource(stream);
-			that.connectInput(node);
-		}, function (err) {
-			console.error(err);
-		});
+		if (that.model.micNode) {
+			that.connectInput(that.model.micNode);
+		} else {
+			navigator.getUserMedia.call(navigator, {audio: true}, function (stream) {
+				that.model.micNode = owl.context.createMediaStreamSource(stream);
+				that.connectInput(that.model.micNode);
+			}, function (err) {
+				console.error(err);
+			});
+		}
+	}
+
+	that.useFileInput = function () {
+		that.connectInput(that.model.fileNode);
+	}
+
+	that.onFileSelect = function (files) {
+		var fileUrl = files[0] ? URL.createObjectURL(files[0]) : '';
+		var audioElement = document.getElementById('file-input-audio');
+		audioElement.src = fileUrl;
 	}
 
 	// Bind to Web Audio