Lessons learned: intercalling between Javascript and Scittle components
is *very* hard. Better to rewrite the sound recorder in Scittle.
This commit is contained in:
parent
b209c843b6
commit
b2a3326667
|
@ -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"))
|
||||
|
||||
|
|
Loading…
Reference in a new issue