Update script.js

script.js

@@ -1,23 +1,62 @@
-async function transcribe() {
-    let fileInput = document.getElementById('audioInput').files[0];
-    if (!fileInput) {
-        alert("Please upload an audio file");
-        return;
-    }
+let mediaRecorder;
+let audioChunks = [];
+let recording = false;
+
+// Function to start recording
+async function startRecording() {
+    let stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    mediaRecorder = new MediaRecorder(stream);
+
+    mediaRecorder.ondataavailable = (event) => {
+        audioChunks.push(event.data);
+    };
+
+    mediaRecorder.onstop = async () => {
+        let audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+        let reader = new FileReader();
+
+        reader.onloadend = async () => {
+            let audioURL = reader.result;
 
-    let reader = new FileReader();
-    reader.readAsDataURL(fileInput);
-    reader.onload = async function () {
-        let audioURL = reader.result;
+            document.getElementById("status").innerText = "Processing...";
+            
+            // Load Whisper model
+            let transcriber = await window.Transformers.pipeline(
+                'automatic-speech-recognition',
+                'Xenova/whisper-tiny.en'
+            );
 
-        // Load the Whisper model
-        let transcriber = await window.Transformers.pipeline(
-            'automatic-speech-recognition',
-            'Xenova/whisper-tiny.en'
-        );
+            // Transcribe audio
+            let output = await transcriber(audioURL);
+            document.getElementById("output").innerText = output.text;
+            document.getElementById("status").innerText = "Done!";
+        };
 
-        // Perform transcription
-        let output = await transcriber(audioURL);
-        document.getElementById('output').innerText = output.text;
+        reader.readAsDataURL(audioBlob);
     };
+
+    mediaRecorder.start();
+    audioChunks = [];
+    recording = true;
+    document.getElementById("recordButton").innerText = "⏹ Stop Recording";
+    document.getElementById("status").innerText = "Recording...";
+}
+
+// Function to stop recording
+function stopRecording() {
+    if (mediaRecorder && recording) {
+        mediaRecorder.stop();
+        recording = false;
+        document.getElementById("recordButton").innerText = "🎤 Start Recording";
+        document.getElementById("status").innerText = "Processing...";
+    }
 }
+
+// Toggle recording
+document.getElementById("recordButton").addEventListener("click", () => {
+    if (!recording) {
+        startRecording();
+    } else {
+        stopRecording();
+    }
+});