1 files changed, 65 insertions, 0 deletions

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);