From c5cc11f56f3afdb8508dff32f7f76b417fd2ba9a Mon Sep 17 00:00:00 2001
From: pacien
Date: Fri, 5 Jan 2024 00:12:47 +0100
Subject: app prototype
Inspired by the MDN example for playing with mediaDevices.
---
app.css | 9 +++++++++
app.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
index.html | 41 ++++++++++++++++++++++++++++++++++++++-
3 files changed, 114 insertions(+), 1 deletion(-)
create mode 100644 app.css
create mode 100644 app.js
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 @@
+
+
EchoClip
@@ -25,13 +27,50 @@
A web tool to record and play back audio clips.
+
+
+
+
+
+
+
+
+
+
+
+
-