My monster it lives!

resources/public/scripts/muharni.js

@@ -16,52 +16,70 @@
  */
 const studentSounds = Array(80).fill(0).map(x => Array(13).fill(null));
 
-
-
 function recordStudentSound(r, c) {
     console.info("Entered recordStudentSound for row " + r + ", column " + c);
 
     if (Number.isInteger(r) && Number.isInteger(c)) {
         $('#record-student').css('color', 'green');
+
         try {
             navigator.mediaDevices.getUserMedia({ audio: true })
                 .then(stream => {
                     const mediaRecorder = new MediaRecorder(stream);
-                mediaRecorder.start();
-
                     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);
                     });
 
-                setTimeout(() => {
+                    mediaRecorder.onstop = function (e) {
-                    mediaRecorder.stop();
+                        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").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-student').css('color', 'red');
+                    };
 
-                }, 3000);
+                    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);
             }
         }
+    }
+}
+
 
 $(document).ready(function () {
     $(".entry-text").on("click", function (e) {
         let cellId = e.currentTarget ? e.currentTarget.id : null;
 
-        if (cellId)
+        if (cellId) {
-        {
             let row = parseInt(cellId.slice(1, 3));
             let colChar = cellId.slice(3);