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

This is almost working, except that sound recording no longer works!

Browse source
This commit is contained in:
Simon Brooke 2022-09-13 20:04:01 +01:00
parent 4f3b14339f
commit 1687242ba4
No known key found for this signature in database
GPG key ID: A7A4F18D1D4DF987
3 changed files with 40 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/public/index.html
View file

@ -14,7 +14,7 @@ src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"
<title>Muharni table</title> <title>Muharni table</title>
</head> </head>
<body id="body"> <body id="body">
<div id="popup" onmouseout="hidePopup();" <div id="popup"
style="display: none; border: thin solid gray; width: 10%"> style="display: none; border: thin solid gray; width: 10%">
<p id="character" <p id="character"
style="text-align: center; margin: 0; font-size: 4em;">?</p> style="text-align: center; margin: 0; font-size: 4em;">?</p>

57
resources/public/scripts/muharni.js
View file

@ -18,9 +18,9 @@ const studentSounds = Array(80).fill(0).map(x => Array(13).fill(null));
function recordStudentSound() { function recordStudentSound(r, c) {
if (currentCell) { if (Number.isInteger(r) && Number.isInteger(c)) {
$('#record-student').css('background-color', 'green'); $('#record-student').css('color', 'green');
navigator.mediaDevices.getUserMedia({ audio: true }) navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => { .then(stream => {
const mediaRecorder = new MediaRecorder(stream); const mediaRecorder = new MediaRecorder(stream);
@ -35,47 +35,68 @@ function recordStudentSound() {
setTimeout(() => { setTimeout(() => {
mediaRecorder.stop(); mediaRecorder.stop();
if (audioChunks.length > 0) { if (audioChunks.length > 0) {
studentSounds[currentCell.row][currentCell.col] = new Blob(audioChunks); studentSounds[r][c] = new Blob(audioChunks);
$('#play-student').prop('disabled', false); $('#play-student').prop('disabled', false);
console.log("Successfully recorded student sound for row " + r + ", column " + c);
} else {
console.warn("Failed to record student sound for row " + r + ", column " + c);
} }
$('#record-student').css('background-color', 'red'); $('#record-student').css('color', 'red');
}, 3000); }, 3000);
}); });
} }
} }
/**
* If a student sound has been recorded for the current cell, play it.
*/
function playStudentSound() {
if (currentCell) {
if (studentSounds[currentCell.row][currentCell.col] != null) {
new Audio(URL.createObjectURL(studentSounds[currentCell.row][currentCell.col])).play();
}
}
}
$(document).ready(function() { $(document).ready(function() {
$(".entry").on("click", function(e) { $(".entry").on("click", function(e) {
let cellId = e.currentTarget ? e.currentTarget.id : null; let cellId = e.currentTarget ? e.currentTarget.id : null;
if (cellId) if (cellId)
{ {
let row = parseInt(cellId.slice(1, 3));
let colChar = cellId.slice( 3);
if (colChar == colChar.toLowerCase()) {
row += 40; /* we're wrapping lower case into the bottom half of the array */
}
let col = cellId.charCodeAt(3) - 65;
if (col > 26 ) {
col -= 32; /* lower case */
}
let studentAudio = studentSounds[row][col];
$("#popup").css({ $("#popup").css({
'left': e.pageX, 'left': e.pageX,
'top': e.pageY 'top': e.pageY
}); });
$("#character").text(e.currentTarget.innerText); $("#character").text(e.currentTarget.innerText +": " + row +"," + col + ".");
$("#play-tutor").off("click"); /* trying to remove any previous click handler */ $("#play-tutor").off("click"); /* trying to remove any previous click handler */
$("#play-tutor").on("click", function(e){ $("#play-tutor").on("click", function(e){
let audioUrl = "audio/" + cellId.slice(1) + ".mp3"; let audioUrl = "audio/" + cellId.slice(1) + ".mp3";
console.log("Playing tutor audio " + audioUrl );
new Audio( audioUrl).play(); new Audio( audioUrl).play();
}); });
$("#record-stop").off("click");
$("#record-stop").on("click", function(e) {
console.log( "Recording student sound for row " + row + ", column " + col);
recordStudentSound(row, col);
});
$("#play-student").off("click");
if (studentAudio != null) {
$("#play-student").on( "click", function(e) {
console.log( "Playing student sound for row " + row + ", column " + col);
new Audio(URL.createObjectURL(studentAudio)).play();
});
}
$("#play-student").prop("disabled", studentAudio == null);
$("#popup").show(); $("#popup").show();
} }
}); });

1
src/muharni/construct.clj
View file

@ -195,7 +195,6 @@
[:title (str title)]] [:title (str title)]]
[:body {:id "body"} [:body {:id "body"}
[:div {:id "popup" [:div {:id "popup"
:onmouseout "hidePopup();"
:style "display: none; border: thin solid gray; width: 10%"} :style "display: none; border: thin solid gray; width: 10%"}
[:p {:id "character" :style "text-align: center; margin: 0; font-size: 4em;"} "?"] [:p {:id "character" :style "text-align: center; margin: 0; font-size: 4em;"} "?"]
[:table {:id "controls" :summary "Controls for audio playback and recording"} [:table {:id "controls" :summary "Controls for audio playback and recording"}