app prototype

Inspired by the MDN example for playing with mediaDevices.

3 files changed, 114 insertions, 1 deletions

diff --git a/app.css b/app.css
new file mode 100644
index 0000000..c32fa83
--- /dev/null
+++ b/app.css
@@ -0,0 +1,9 @@
+/*
+ * EchoClip, a web tool to record and play back audio clips.
+ * Copyright 2024 Pacien TRAN-GIRARD
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+#error {
+  color: red;
+}
\ No newline at end of file
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..762a72f
--- /dev/null
+++ b/app.js
@@ -0,0 +1,65 @@
+/*
+ * EchoClip, a web tool to record and play back audio clips.
+ * Copyright 2024 Pacien TRAN-GIRARD
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+const errorContainer = document.querySelector("#error");
+const recordBtn = document.querySelector("#record");
+const autoplayCheckbox = document.querySelector("#autoplay");
+const clearBtn = document.querySelector("#clear");
+const clips = document.querySelector("#clips");
+
+function wrapElement(wrapper, child) {
+  const wrapperElement = document.createElement(wrapper);
+  wrapperElement.append(child);
+  return wrapperElement;
+}
+
+// TODO: fancy player element with spectrogram and spectrum analyser?
+function audioElementForBlob(blob) {
+  const audioElement = document.createElement("audio");
+  audioElement.src = window.URL.createObjectURL(blob);
+  audioElement.setAttribute("controls", "");
+  return audioElement;
+}
+
+function onGetDeviceSuccess(stream) {
+  const mediaRecorder = new MediaRecorder(stream);
+  let recordingChunks = [];
+
+  mediaRecorder.addEventListener("dataavailable", event => {
+    recordingChunks.push(event.data);
+  });
+
+  mediaRecorder.addEventListener("stop", _event => {
+    const blob = new Blob(recordingChunks, { type: mediaRecorder.mimeType });
+    recordingChunks = [];
+    const audioElement = audioElementForBlob(blob);
+    // TODO: autoplay audioElement if checkbox enabled
+    // TODO: record blob and list to local persistent storage
+    // TODO: "clear all" button to clear all clips
+    // TODO: buttons to clear individual clips
+    // TODO: keyboard shortcut to play clips for the ten last indexes
+    clips.prepend(wrapElement("li", audioElement));
+  });
+
+  // TODO: handle "space" key hold the same as holding the "record" button
+  recordBtn.addEventListener("mousedown", _event => {
+    mediaRecorder.start();
+  });
+
+  recordBtn.addEventListener("mouseup", _event => {
+    mediaRecorder.stop();
+  });
+}
+
+function onGetDeviceError(error) {
+  console.log(error);
+  errorContainer.innerHTML = error;
+}
+
+navigator
+  .mediaDevices
+  .getUserMedia({ audio: true })
+  .then(onGetDeviceSuccess, onGetDeviceError);
diff --git a/index.html b/index.html
index 71b17c4..751187d 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,8 @@
   <link rel="mask-icon" href="favicon.svg" color="#000000">
   <link rel="apple-touch-icon" href="favicon.svg">
 
+  <link rel="stylesheet" href="app.css" type="text/css">
+
   <title>EchoClip</title>
 </head>
 
@@ -25,13 +27,50 @@
     <p>A web tool to record and play back audio clips.</p>
   </header>
 
+  <section id="error">
+    <noscript>
+      This web application requires JavaScript support to be functional.
+    </noscript>
+  </section>
+
+  <section>
+    <fieldset>
+      <legend>Record a new clip</legend>
+
+      <button id="record">Hold (space) to record</button>
+
+      <input type="checkbox" id="autoplay" name="autoplay" checked>
+      <label for="autoplay">Autoplay</label>
+    </fieldset>
+  </section>
+
+  <section>
+    <fieldset>
+      <legend>Saved clips</legend>
+
+      <p>
+        Latest on top.
+        Hold a number key (1-9) for quick replay.
+      </p>
+
+      <button id="clear">Clear all</button>
+
+      <ol id="clips">
+      </ol>
+    </fieldset>
+  </section>
+
   <footer>
+    <p>Speak, sing, practice, have fun! Nothing is sent out to the network.</p>
+
     <ul>
       <li><a href="https://pacien.org">&copy; 2024 Pacien</a></li>
       <li><a href="https://cgit.pacien.net/echoclip">Source code (EUPL)</a></li>
       <li><a href="https://www.paypal.com/paypalme/pacien/10">Donate</a></li>
     </ul>
   </footer>
+
+  <script src="app.js"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file