Update static/script.js

static/script.js

@@ -3,13 +3,40 @@ document.addEventListener("DOMContentLoaded", function() {
     const audioPlayer = document.getElementById("audio-player");
     const chatContainer = document.getElementById("chat-container");
 
+    let mediaRecorder;
+    let chunks = [];
+
     recordBtn.addEventListener("click", function() {
-        // Implement audio recording logic here
-        // You can use the MediaRecorder API or a library like RecordRTC
+        if (mediaRecorder && mediaRecorder.state === "recording") {
+            mediaRecorder.stop();
+            recordBtn.textContent = "Bonyeza kitufe cha kurekodi na uliza swali lako";
+        } else {
+            navigator.mediaDevices.getUserMedia({ audio: true })
+                .then(function(stream) {
+                    mediaRecorder = new MediaRecorder(stream);
+                    chunks = [];
+
+                    mediaRecorder.addEventListener("dataavailable", function(e) {
+                        chunks.push(e.data);
+                    });
+
+                    mediaRecorder.addEventListener("stop", function() {
+                        const audioBlob = new Blob(chunks, { type: "audio/wav" });
+                        sendAudioToServer(audioBlob);
+                    });
 
-        // Once the audio is recorded, send it to the server for transcription
+                    mediaRecorder.start();
+                    recordBtn.textContent = "Acha kurekodi";
+                })
+                .catch(function(err) {
+                    console.error("Error accessing microphone:", err);
+                });
+        }
+    });
+
+    function sendAudioToServer(audioBlob) {
         const formData = new FormData();
-        formData.append("audio", audioBlob);
+        formData.append("audio", audioBlob, "recording.wav");
 
         fetch("/transcribe", {
             method: "POST",
@@ -49,7 +76,7 @@ document.addEventListener("DOMContentLoaded", function() {
                 });
             });
         });
-    });
+    }
 
     function displayUserMessage(text) {
         const messageElement = document.createElement("div");