From 0bf2af62baeb7912d6274bab4ff6d7f83dd692ee Mon Sep 17 00:00:00 2001
From: pacien
Date: Fri, 5 Jan 2024 01:53:30 +0100
Subject: only play one audio clip at once

---
 app.js | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/app.js b/app.js
index 5095e20..6d2df4e 100644
--- a/app.js
+++ b/app.js
@@ -11,6 +11,25 @@ const autoplayCheckbox = document.querySelector("#autoplay");
 const clearBtn = document.querySelector("#clear");
 const clips = document.querySelector("#clips");
 
+function stopPlayer(player) {
+  player.pause();
+  player.currentTime = 0;
+}
+
+function stopOtherPlayersExcept(player) {
+  document.querySelectorAll("audio").forEach(other => {
+    if (other != player)
+      stopPlayer(other);
+  });
+}
+
+function makeExclusive(player) {
+  player.addEventListener("play", _event => {
+    stopOtherPlayersExcept(player);
+  });
+  return player;
+}
+
 function wrapElement(wrapper, child) {
   const wrapperElement = document.createElement(wrapper);
   wrapperElement.append(child);
@@ -41,7 +60,7 @@ function onGetDeviceSuccess(stream) {
     recordingIndicator.classList.remove("active");
     const blob = new Blob(recordingChunks, { type: mediaRecorder.mimeType });
     recordingChunks = [];
-    const audioElement = audioElementForBlob(blob);
+    const audioElement = makeExclusive(audioElementForBlob(blob));
 
     // TODO: record blob and list to local persistent storage
     // TODO: "clear all" button to clear all clips
@@ -50,10 +69,8 @@ function onGetDeviceSuccess(stream) {
 
     clips.prepend(wrapElement("li", audioElement));
 
-    if (autoplayCheckbox.checked) {
-      // TODO: stop playing any other clip
+    if (autoplayCheckbox.checked)
       audioElement.play();
-    }
   });
 
   recordBtn.addEventListener("mousedown", _event => {
-- 
cgit v1.2.3