From ca5dd2d21b982dfc556e0cb486e51f7d7b6d4760 Mon Sep 17 00:00:00 2001
From: Simon Brooke <simon@journeyman.cc>
Date: Sun, 31 Aug 2025 13:55:26 +0100
Subject: [PATCH] A lot of work on recording sound, which I think is on the
 right lines but does not work yet.

---
 japji/index.html | 55 +++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 43 insertions(+), 12 deletions(-)

diff --git a/japji/index.html b/japji/index.html
index 8f23781..3c1250a 100644
--- a/japji/index.html
+++ b/japji/index.html
@@ -92,7 +92,7 @@
 
   <script type="application/x-scittle">
       (require '[reagent.core :as r]
-           '[reagent.dom :as rdom])
+               '[reagent.dom :as rdom])
 
       (declare launch-popup markup-phrase)
 
@@ -1723,9 +1723,39 @@
 
       (def student-recordings (atom (apply vector (repeat (count data) nil))))
 
-      (defn ^:export set-student-recording! 
-        [phrase-no value]
-        (swap! student-recordings assoc phrase-no value))
+      (defn enable-play-button [phrase-no])
+
+      (defn record-student-sound!
+        [phrase-no]
+        (.info js/console "Recording student sound for phrase " phrase-no)
+        
+        (try
+          (.then (.getUserMedia (.mediaDevices js/navigator) {:audio true})
+            (fn [arg] 
+              (let [media-recorder (MediaRecorder. arg)
+                    audio-chunks (atom [])]
+                  (.start media-recorder)
+                  (set! media-recorder onerror 
+                    (fn [s] 
+                      (.log js/console (str "Error while recording sound: " s))))
+                  (.addEventListener media-recorder "dataavailable" 
+                    (fn [event]
+                      (.info js/console "Audio recorded...")
+                      (swap! audio-chunks conj (.-data event))))
+                  (set! (.-onstop media-recorder)
+                    (fn [e]
+                      (js/console.log "data available after MediaRecorder.stop() called.")
+                      (if (> (count @audio-chunks) 0)
+                        (do
+                          ;; Store the blob in the student-sounds data structure
+                          (swap! student-recordings assoc phrase-no
+                            (js/Blob. (clj->js @audio-chunks)))
+                          (enable-play-button! phrase-no))))))))
+          (catch js/Error e
+            (.log js/console 
+                (str "Error thrown while recording sound: " (.-message e))))
+          (catch :default x
+                (str "Unexpected object thrown while recording " x))))
 
       (defn interval-watcher 
         "Returns a closure over this `audio` and this `end`,
@@ -1769,10 +1799,11 @@
       (def popup-control-style {:border "thin solid #331f16"
                                 :padding "0 0.5em"})
 
-      (defn play-student [phrase-no]
-        (js/alert "Now you should be able to play your recording, but that does not work yet"))
+      (defn play-student! 
+        [phrase-no]
+        (.play (js/Audio. (.createObjectURL js/URL (@student-sounds phrase-no)))))
 
-      (defn animate-progress-bar
+      (defn animate-progress-bar!
         [id duration]
         (let [progress-step (int (* duration 10))]
           (do
@@ -1785,11 +1816,11 @@
                             (.info js/console (str "progress-width updated to " i))) (* i progress-step))
                     (recur (inc i)))))))
 
-      (defn record-student [phrase-no]
+      (defn record-student! [phrase-no]
         (let [phrase-data (nth data phrase-no)
               duration (- (:lineEnd phrase-data) (:lineStart phrase-data))]
-            (animate-progress-bar "progress-bar" duration)
-            (js/alert "Now you should be able to record yourself, but that does not work yet")))
+            (record-student-sound! phrase-no)
+            (animate-progress-bar! "progress-bar" duration)))
 
       (defn launch-popup [phrase-no event]
         (.log js/console (str "Launching popup for phrase " phrase-no))
@@ -1833,11 +1864,11 @@
                           [:tr [:td "You"] 
                               (when (@student-recordings phrase-no)
                                 [:td {:id "popup-play-student"
-                                      :on-click #(play-student phrase-no)
+                                      :on-click #(play-student! phrase-no)
                                       :style popup-control-style
                                       :title "Play your own recording"} "►"])
                               [:td {:id "popup-record-stop"
-                                    :on-click #(record-student phrase-no)
+                                    :on-click #(record-student! phrase-no)
                                     :style popup-control-style
                                     :title "Record yourself saying this phrase"} 
                                     "⏺"]]