simon/japji
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

A lot of work on recording sound, which I think is on the right lines but does not work yet.

Browse source
This commit is contained in:
Simon Brooke 2025-08-31 13:55:26 +01:00
parent b2a3326667
commit ca5dd2d21b
1 changed files with 43 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
japji/index.html
View file

@ -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"}
"⏺"]]