?
diff --git a/resources/public/scripts/muharni.js b/resources/public/scripts/muharni.js index ab42548..e3f9377 100644 --- a/resources/public/scripts/muharni.js +++ b/resources/public/scripts/muharni.js @@ -18,9 +18,9 @@ const studentSounds = Array(80).fill(0).map(x => Array(13).fill(null)); -function recordStudentSound() { - if (currentCell) { - $('#record-student').css('background-color', 'green'); +function recordStudentSound(r, c) { + if (Number.isInteger(r) && Number.isInteger(c)) { + $('#record-student').css('color', 'green'); navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { const mediaRecorder = new MediaRecorder(stream); @@ -35,46 +35,67 @@ function recordStudentSound() { setTimeout(() => { mediaRecorder.stop(); if (audioChunks.length > 0) { - studentSounds[currentCell.row][currentCell.col] = new Blob(audioChunks); + studentSounds[r][c] = new Blob(audioChunks); $('#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); }); } } -/** - * 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() { $(".entry").on("click", function(e) { let cellId = e.currentTarget ? e.currentTarget.id : null; 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({ 'left': e.pageX, '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").on("click", function(e){ let audioUrl = "audio/" + cellId.slice(1) + ".mp3"; + console.log("Playing tutor audio " + audioUrl ); 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(); } diff --git a/src/muharni/construct.clj b/src/muharni/construct.clj index 96a2551..dfdf8d3 100644 --- a/src/muharni/construct.clj +++ b/src/muharni/construct.clj @@ -195,7 +195,6 @@ [:title (str title)]] [:body {:id "body"} [:div {:id "popup" - :onmouseout "hidePopup();" :style "display: none; border: thin solid gray; width: 10%"} [:p {:id "character" :style "text-align: center; margin: 0; font-size: 4em;"} "?"] [:table {:id "controls" :summary "Controls for audio playback and recording"}