add red circle indicator when active recording

3 files changed, 14 insertions, 3 deletions

diff --git a/app.css b/app.css
index c32fa83..b2f9841 100644
--- a/app.css
+++ b/app.css
@@ -6,4 +6,8 @@
 
 #error {
   color: red;
+}
+
+#recording-indicator.active {
+  color: red;
 }
\ No newline at end of file
diff --git a/app.js b/app.js
index 345c613..5095e20 100644
--- a/app.js
+++ b/app.js
@@ -5,6 +5,7 @@
  */
 
 const errorContainer = document.querySelector("#error");
+const recordingIndicator = document.querySelector("#recording-indicator");
 const recordBtn = document.querySelector("#record");
 const autoplayCheckbox = document.querySelector("#autoplay");
 const clearBtn = document.querySelector("#clear");
@@ -28,13 +29,16 @@ function onGetDeviceSuccess(stream) {
   const mediaRecorder = new MediaRecorder(stream);
   let recordingChunks = [];
 
-  // TODO: add some recording indicator (red bullet) when recording
-
   mediaRecorder.addEventListener("dataavailable", event => {
     recordingChunks.push(event.data);
   });
 
+  mediaRecorder.addEventListener("start", _event => {
+    recordingIndicator.classList.add("active");
+  });
+
   mediaRecorder.addEventListener("stop", _event => {
+    recordingIndicator.classList.remove("active");
     const blob = new Blob(recordingChunks, { type: mediaRecorder.mimeType });
     recordingChunks = [];
     const audioElement = audioElementForBlob(blob);
diff --git a/index.html b/index.html
index 751187d..621dc4d 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,10 @@
     <fieldset>
       <legend>Record a new clip</legend>
 
-      <button id="record">Hold (space) to record</button>
+      <button id="record">
+        <span id="recording-indicator">⏺</span>
+        Hold (space) to record
+      </button>
 
       <input type="checkbox" id="autoplay" name="autoplay" checked>
       <label for="autoplay">Autoplay</label>