added compatibility checks; improved voice-recorder-demo;

Author: fquirin

modules-demo.html

@@ -15,7 +15,8 @@
 	<script type="text/javascript" src="src/sepia-web-audio.js?v=0.9.7"></script>
 	<script>
 		//set correct modules folder
-		SepiaFW.webAudio.defaultProcessorOptions.moduleFolder = "src/modules";
+		if (window.SepiaFW) SepiaFW.webAudio.defaultProcessorOptions.moduleFolder = "src/modules";
+		else alert("SEPIA Web Audio Library not found or not supported (IE11?)!");
 	</script>
 
 	<script type="text/javascript" src="src/resources/pcm-convert.js?v=0.9.7"></script>

src/modules/shared/sepia-stt-socket-client.js

@@ -60,7 +60,7 @@ class SepiaSttSocketClient {
 
 	pingServer(successCallback, errorCallback){
 		const controller = new AbortController();
-		setTimeout(() => controller.abort(), 8000);
+		setTimeout(function(){controller.abort();}, 8000);
 		fetch(this.serverUrl + "/ping", {
 			signal: controller.signal
 		}).then(function(res){ return res.json(); })
@@ -74,7 +74,7 @@ class SepiaSttSocketClient {
 
 	loadServerInfo(successCallback, errorCallback){
 		const controller = new AbortController();
-		setTimeout(() => controller.abort(), 8000);
+		setTimeout(function(){controller.abort();}, 8000);
 		fetch(this.serverUrl + "/settings", {
 			method: "GET",
 			signal: controller.signal

test-pages/recorder.css

@@ -133,6 +133,9 @@ h1 > button {
 	border-radius: 50%;
 	margin: 16px;
 	cursor: pointer;
+	-webkit-touch-callout: none !important; 
+	-webkit-user-select: none;
+	user-select: none;
 }
 @media (hover: hover) and (pointer: fine){
 	#micButton:active {
@@ -145,6 +148,12 @@ h1 > button {
 #micButton.recording {
 	background-color: #f04;
 }
+#micButton.reset {
+	background-color: #16ABC3 !important;
+	color: #fff !important;
+	box-shadow: 0px 1px 0px 1px #ccc !important;
+	margin: 16px !important;
+}
 #recoderInfo.with-button {
 	border: 0;
 	padding: 0;

tutorial-code-page.html

@@ -9,7 +9,7 @@
 	<script type="text/javascript" src="src/sepia-web-audio.js?v=0.9.7"></script>
 	<script>
 		//set correct modules folder
-		SepiaFW.webAudio.defaultProcessorOptions.moduleFolder = "src/modules";
+		if (window.SepiaFW) SepiaFW.webAudio.defaultProcessorOptions.moduleFolder = "src/modules";
 	</script>
 
 	<link rel="stylesheet" type="text/css" href="test-pages/tests.css?v=0.9.7">
@@ -27,6 +27,8 @@ <h1>SEPIA Web Audio Processor - Tutorial Code</h1>
 	<textarea id="info" style="width: 100%; min-height: 150px;"></textarea>
 </div>
 <script type='text/javascript'>
+	if (!window.SepiaFW) alert("SEPIA Web Audio Library not found or not supported (IE11?)!");
+	
 	//logging
 	var infoBox = document.getElementById("info");
 	function addInfo(msg){

voice-recorder-demo.html

@@ -16,7 +16,7 @@
 	<script type="text/javascript" src="src/modules/shared/ring-buffer.min.js"></script>
 	<script>
 		//set correct modules folder
-		SepiaFW.webAudio.defaultProcessorOptions.moduleFolder = "src/modules";
+		if (window.SepiaFW) SepiaFW.webAudio.defaultProcessorOptions.moduleFolder = "src/modules";
 	</script>
 
 	<link rel="stylesheet" type="text/css" href="test-pages/recorder.css?v=0.9.7">
@@ -39,7 +39,7 @@ <h2>Recorder</h2>
 			<option value="toggle-vad">Toggle ON/VAD OFF</option>
 			<!--<option value="push-to-talk">Push-to-talk</option> TODO -->
 		</select></div>
-		<div class="group"><label>Start/Stop:</label><button id="micButton" onclick="toggleMic();"></button></div>
+		<div class="group"><label>Start/Stop:</label><button id="micButton"></button></div>
 		<div class="group"><label>Gain:</label><input id="microphoneGain" class="small" type="number" value="1.0" min="0.1" max="100" step="0.1"></div>
 		<div class="group"><label>Resources:</label><button onclick="releaseMic();">Release</button></div>
 	</div>
@@ -60,7 +60,10 @@ <h2>Log <button class="variant-2" onclick="clearMessages()" style="margin: 0 0 0
 </div>
 <script type='text/javascript' src="test-pages/test-commons.js"></script>
 <script type='text/javascript'>
-			
+	if (!window.SepiaVoiceRecorder){
+		SepiaVoiceRecorder = {notSupported: true};	//Library not found or not supported (browser <= IE11)
+	}
+	
 	//--- Recorder ---
 
 	var volumeThresholds = [0.05, 10];		//too low/too high
@@ -124,10 +127,14 @@ <h2>Log <button class="variant-2" onclick="clearMessages()" style="margin: 0 0 0
 			});
 		}
 	}
-	function releaseMic(){
+	function releaseMic(callback){
 		SepiaVoiceRecorder.stopAndReleaseIfActive(function(){
-			addMessage("RELEASED Microphone");
+			isLoading = false;
+			isRecording = false;
 			samplesReceived = null;
+			addMessage("RELEASED Microphone");
+			setMicState("idle");
+			if (callback) callback();
 		});
 	}
 	function onMicError(){
@@ -273,19 +280,44 @@ <h2>Log <button class="variant-2" onclick="clearMessages()" style="margin: 0 0 0
 		}
 	}
 
-	//--- Messages and animations ---
+	//--- Controls, Messages and Animations ---
 
 	var micButton = document.getElementById("micButton");
 	function setMicState(state){
-		micButton.classList.remove("recording", "loading");
+		micButton.classList.remove("recording", "loading", "reset");
 		if (state == "loading"){
 			micButton.classList.add("loading");
 		}else if (state == "recording"){
 			micButton.classList.add("recording");
+		}else if (state == "reset"){
+			micButton.classList.add("reset");
 		}else{
 			//idle
 		}
 	}
+	var micLongPressTimer = undefined;
+	var micIsLongPress = false;
+	micButton.addEventListener('pointerdown', function(event){
+		clearTimeout(micLongPressTimer);
+		micLongPressTimer = setTimeout(function(){
+			onMicLongPress();
+		}, 1000);
+	});
+	micButton.addEventListener('pointerup', function(event){
+		clearTimeout(micLongPressTimer);
+		if (!micIsLongPress){
+			toggleMic();
+		}else{
+			setMicState("");
+		}
+		micIsLongPress = false;
+	});
+	function onMicLongPress(){
+		micIsLongPress = true;
+		releaseMic(function(){
+			if (micIsLongPress) setMicState("reset");
+		});
+	}
 
 	var volumeBar = document.getElementById("volumeBar");
 	var volBarPassedCheck = false;
@@ -325,6 +357,7 @@ <h2>Log <button class="variant-2" onclick="clearMessages()" style="margin: 0 0 0
 		messages.style.height = "150px";
 	}
 	function showInfoModal(msg){
+		if (!window.createModal){ alert(msg); return; }
 		var modalContent = document.createElement("div");
 		modalContent.textContent = msg;
 		var mod = createModal(modalContent, "480px", "85%");
@@ -336,9 +369,12 @@ <h2>Log <button class="variant-2" onclick="clearMessages()" style="margin: 0 0 0
 	}
 
 	// ON READY
-			
-	setVolume(0);
-	setMicState("idle");
+	if (SepiaVoiceRecorder.notSupported){
+		showInfoModal("SEPIA Web Audio Library not found or not supported (IE11?)!");
+	}else{
+		setVolume(0);
+		setMicState("idle");
+	}
 </script>
 </body>
 </html>