Allow users to stop recording at any time

nomadkaraoke · Aug 7, 2019 · ceb4e43 · ceb4e43
1 parent 77df1ce
commit ceb4e43
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 15 deletions.
diff --git a/first-step.html b/first-step.html
@@ -7,7 +7,6 @@
   <h2>First Step: Base Note</h2>
   <body>
     <p>Sing a comfortable note near the middle of your voice range.</p>
-    <button id="recordbutton">Record</button>
     <button id="playbutton">Play Recording</button>
     <br>
     <br>

diff --git a/first-step.js b/first-step.js
@@ -1,11 +1,13 @@
 let audio = null;
+let mediaRecorder = null;
 let body = document.querySelector("body");
 let count = 0;
+makeRecordButton();
 
 function record() {
     navigator.mediaDevices.getUserMedia({ audio: true })
       .then(stream => {
-        const mediaRecorder = new MediaRecorder(stream);
+        mediaRecorder = new MediaRecorder(stream);
         mediaRecorder.start();
 
         const audioChunks = [];
@@ -17,27 +19,53 @@ function record() {
           const audioBlob = new Blob(audioChunks);
           const audioUrl = URL.createObjectURL(audioBlob);
           audio = new Audio(audioUrl);
-          count++;
-          let text = document.createElement("p");
-          let node = document.createTextNode("Recording " + count + "  complete");
-          text.append(node);
-          body.append(text);
-        });
 
-        setTimeout(() => {
-          mediaRecorder.stop();
-        }, 5000);
-      });
+          let stopbutton = document.getElementById("stopbutton");
+          if (stopbutton != null) {
+             stopbutton.parentNode.removeChild(stopbutton);
+          }
+          makeRecordButton();
+        });
+      }).catch(rejectReason => {
+        console.log(rejectReason);
+        let stopbutton = document.getElementById("stopbutton");
+        if (stopbutton != null) {
+            stopbutton.parentNode.removeChild(stopbutton);
+        }
+        makeRecordButton();
+        alert("Please enable your microphone.");
+        });
 }
 
-let recordbutton = document.getElementById("recordbutton");
-recordbutton.onclick = record;
-
 let playbutton = document.getElementById("playbutton");
 playbutton.onclick = function() {
     if (audio != null) {
         audio.play();
     }
 }
 
+function makeStopButton() {
+    let button = document.createElement("BUTTON");
+    button.innerHTML = "Stop Recording";
+    button.setAttribute("id", "stopbutton");
+    button.onclick = function() {
+        if (mediaRecorder != null) {
+            mediaRecorder.stop();
+        }
+    };
+    body.insertBefore(button, body.childNodes[3])
+};
+
+function makeRecordButton() {
+    let button = document.createElement("BUTTON");
+    button.innerHTML = "Record";
+    button.setAttribute("id", "recordbutton");
+    button.onclick = function() {
+        record();
+        makeStopButton();
+        button.parentNode.removeChild(button);
+    };
+    body.insertBefore(button, body.childNodes[3])
+};
+
 localStorage.setItem('baseNote', 'C3');