Lessons learned: intercalling between Javascript and Scittle components

is *very* hard. Better to rewrite the sound recorder in Scittle.
This commit is contained in:
Simon Brooke 2025-08-31 11:39:10 +01:00
parent b209c843b6
commit b2a3326667

View file

@ -88,76 +88,6 @@
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="resources/scripts/scittle.reagent.js" type="text/javascript"></script>
<script type="'application/x-scittle">
;; bits of Scittle stuff that need to be set up for recordStudentSound to
;; work
</script>
<script type="text/javascript">
/* Adapted from muharni.js, because we've already done this once.
* It would be cleaner to do this again in Scittle, but I don't
* yet know how to handle the promises. Note that Muharni used
* JQuery, which I would prefer not to use here simply to keep the
* download size down. */
function recordStudentSound(r, c) {
console.info("Entered recordStudentSound for row " + r + ", column " + c);
if (Number.isInteger(r) && Number.isInteger(c)) {
$('#record-stop').css('color', 'green');
try {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
const mediaRecorder = new MediaRecorder(stream);
const audioChunks = [];
mediaRecorder.start();
mediaRecorder.onerror = function (e) {
console.log("An error has occurred: " + e.message);
};
mediaRecorder.addEventListener("dataavailable", event => {
console.info("Audio recorded...")
audioChunks.push(event.data);
});
mediaRecorder.onstop = function (e) {
console.log("data available after MediaRecorder.stop() called.");
if (audioChunks.length > 0) {
studentSounds[r][c] = new Blob(audioChunks);
$('#play-student').prop('disabled', false);
$('#play-student').css('color', 'black');
$("#play-student").on("click", function (e) {
console.log("Playing student sound for row " + r + ", column " + c);
new Audio(URL.createObjectURL(studentSounds[r][c])).play();
});
console.log("Successfully recorded student sound for row " + r + ", column " + c);
} else {
console.warn("Failed to record student sound for row " + r + ", column " + c);
window.alert("No sound detected. Check your microphone?");
}
$('#record-stop').css('color', 'red');
};
setTimeout(() => {
mediaRecorder.requestData();
mediaRecorder.stop();
}, 5000);
});
} catch (error) {
console.error(error);
if (error instanceof TypeError) {
window.alert("Sound recording is only possible on secure connections.");
}
else if (error instanceof DOMException) {
window.alert("No microphone detected? " + error.message);
}
}
}
}
</script>
<script type="application/x-scittle">
@ -166,7 +96,8 @@
(declare launch-popup markup-phrase)
(def data ;; converted from japji-nihung-timings.json using http://cljson.com/
(def data
;; converted from japji-nihung-timings.json using http://cljson.com/
[{:words [{:text "ੴ", :start 3.482, :end 5.761}],
:lineStart 3.482,
:lineEnd 5.761}
@ -1785,6 +1716,17 @@
(def recording (.getElementById js/document "japji-bindranwale"))
(.log js/console (str "Data has " (count data) " entries"))
;; bits of Scittle stuff that need to be set up for recordStudentSound to
;; work
(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 interval-watcher
"Returns a closure over this `audio` and this `end`,
which pauses and clears down the interval of the audio when it is
@ -1827,8 +1769,6 @@
(def popup-control-style {:border "thin solid #331f16"
:padding "0 0.5em"})
(def student-recordings (atom (apply vector (repeat (count data) nil))))
(defn play-student [phrase-no]
(js/alert "Now you should be able to play your recording, but that does not work yet"))