Update static/js/design.js

static/js/design.js

@@ -3,8 +3,8 @@ let mediaRecorder;
 let recordedChunks = [];
 
 // Get elements
-const micContainer = document.getElementsByClassName('mic-container')[0];
-const circle = micContainer.getElementsByClassName('circle')[0];
+const micContainer = document.querySelector('.mic-container');
+const circle = document.querySelector('.circle');
 const outputContainer = document.getElementById('output');
 const audioPlayerContainer = document.getElementById('audioPlayerContainer');
 const audioPlayer = document.getElementById('audioPlayer');
@@ -21,21 +21,28 @@ micContainer.addEventListener('click', function () {
 function startRecording() {
     navigator.mediaDevices.getUserMedia({ audio: true })
         .then(function (stream) {
-            // Create a MediaRecorder instance with MIME type 'audio/wav'
-            mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/wav' });
-            mediaRecorder.start();
-
+            mediaRecorder = new MediaRecorder(stream);
+            
             mediaRecorder.ondataavailable = function (e) {
                 if (e.data.size > 0) {
                     recordedChunks.push(e.data);
                 }
             };
 
-            // Update UI for recording
-            circle.classList.add('active');
-            outputContainer.textContent = 'Recording...';
-            audioPlayerContainer.style.display = 'none'; // Hide audio player initially
-            isRecording = true;
+            mediaRecorder.onstart = function () {
+                // Update UI for recording
+                circle.classList.add('active');
+                outputContainer.textContent = 'Recording...';
+                audioPlayerContainer.style.display = 'none'; // Hide audio player initially
+                isRecording = true;
+            };
+
+            mediaRecorder.onerror = function (e) {
+                console.error('Error recording audio:', e);
+                stopRecording(); // Stop recording on error
+            };
+
+            mediaRecorder.start();
         })
         .catch(function (err) {
             console.error('The following error occurred: ' + err);
@@ -43,7 +50,9 @@ function startRecording() {
 }
 
 function stopRecording() {
-    mediaRecorder.stop();
+    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+        mediaRecorder.stop();
+    }
 
     mediaRecorder.onstop = function () {
         const blob = new Blob(recordedChunks, { type: 'audio/wav' });