Update templates/index.html

templates/index.html

@@ -54,34 +54,62 @@
       let fftPlot = null; // To store the Chart.js instance
 
       startButton.addEventListener("click", async () => {
-        // Request microphone permission
         try {
-          await navigator.mediaDevices.getUserMedia({ audio: true });
+          // Request microphone permission and record audio
+          const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+          const mediaRecorder = new MediaRecorder(stream);
+          const audioChunks = [];
+          
+          mediaRecorder.ondataavailable = (event) => {
+            audioChunks.push(event.data);
+          };
+
+          mediaRecorder.onstop = async () => {
+            const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+            const formData = new FormData();
+            formData.append('audio', audioBlob, 'recording.wav');
+
+            statusText.textContent = "Processing...";
+
+            try {
+              const response = await fetch("/process_audio", {
+                method: "POST",
+                body: formData
+              });
+
+              if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+              }
+
+              const data = await response.json();
+
+              statusText.textContent = "";
+              if (data.message) {
+                displayNoSpeechDetected(data.message);
+              } else {
+                displayFFTPlot(
+                  data.peak_frequencies,
+                  data.peak_magnitudes,
+                  data.sorted_indices
+                );
+                displayResults(data);
+              }
+            } catch (error) {
+              console.error("Error processing audio:", error);
+              statusText.textContent = "Error processing audio.";
+            }
+          };
+
+          mediaRecorder.start();
           statusText.textContent = "Recording...";
 
-          // Send POST request to Flask endpoint
-          const response = await fetch("/process_audio", {
-            method: "POST",
-          });
-
-          // Parse JSON response
-          const data = await response.json();
-
-          // Display results
-          statusText.textContent = "";
-          if (data.message) {
-            displayNoSpeechDetected(data.message);
-          } else {
-            displayFFTPlot(
-              data.peak_frequencies,
-              data.peak_magnitudes,
-              data.sorted_indices
-            );
-            displayResults(data);
-          }
+          setTimeout(() => {
+            mediaRecorder.stop();
+          }, 5000); // Record for 5 seconds
+
         } catch (err) {
-          statusText.textContent = "Microphone permission denied.";
-          console.error("Microphone permission denied:", err);
+          console.error("Microphone permission denied or other error:", err);
+          statusText.textContent = "Microphone permission denied or other error.";
         }
       });