aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--app.css4
-rw-r--r--app.js8
-rw-r--r--index.html5
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 @@
6 6
7#error { 7#error {
8 color: red; 8 color: red;
9}
10
11#recording-indicator.active {
12 color: red;
9} \ No newline at end of file 13} \ 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 @@
5 */ 5 */
6 6
7const errorContainer = document.querySelector("#error"); 7const errorContainer = document.querySelector("#error");
8const recordingIndicator = document.querySelector("#recording-indicator");
8const recordBtn = document.querySelector("#record"); 9const recordBtn = document.querySelector("#record");
9const autoplayCheckbox = document.querySelector("#autoplay"); 10const autoplayCheckbox = document.querySelector("#autoplay");
10const clearBtn = document.querySelector("#clear"); 11const clearBtn = document.querySelector("#clear");
@@ -28,13 +29,16 @@ function onGetDeviceSuccess(stream) {
28 const mediaRecorder = new MediaRecorder(stream); 29 const mediaRecorder = new MediaRecorder(stream);
29 let recordingChunks = []; 30 let recordingChunks = [];
30 31
31 // TODO: add some recording indicator (red bullet) when recording
32
33 mediaRecorder.addEventListener("dataavailable", event => { 32 mediaRecorder.addEventListener("dataavailable", event => {
34 recordingChunks.push(event.data); 33 recordingChunks.push(event.data);
35 }); 34 });
36 35
36 mediaRecorder.addEventListener("start", _event => {
37 recordingIndicator.classList.add("active");
38 });
39
37 mediaRecorder.addEventListener("stop", _event => { 40 mediaRecorder.addEventListener("stop", _event => {
41 recordingIndicator.classList.remove("active");
38 const blob = new Blob(recordingChunks, { type: mediaRecorder.mimeType }); 42 const blob = new Blob(recordingChunks, { type: mediaRecorder.mimeType });
39 recordingChunks = []; 43 recordingChunks = [];
40 const audioElement = audioElementForBlob(blob); 44 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 @@
37 <fieldset> 37 <fieldset>
38 <legend>Record a new clip</legend> 38 <legend>Record a new clip</legend>
39 39
40 <button id="record">Hold (space) to record</button> 40 <button id="record">
41 <span id="recording-indicator">⏺</span>
42 Hold (space) to record
43 </button>
41 44
42 <input type="checkbox" id="autoplay" name="autoplay" checked> 45 <input type="checkbox" id="autoplay" name="autoplay" checked>
43 <label for="autoplay">Autoplay</label> 46 <label for="autoplay">Autoplay</label>