Create script.js

script.js

@@ -0,0 +1,106 @@
+const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+let recognition = null;
+let isRecording = false;
+let lastTimestamp = null;
+
+const languageSelect = document.getElementById('languageSelect');
+const toggleButton = document.getElementById('toggleButton');
+const transcriptionOutput = document.getElementById('transcriptionOutput');
+const statusMessage = document.getElementById('statusMessage');
+const clearButton = document.getElementById('clearButton');
+const downloadButton = document.getElementById('downloadButton');
+
+let liveBuffer = "";
+
+// Highlight fillers
+function highlightDisfluencies(text) {
+  return text.replace(/\b(um+|uh+|er+|ah+|eh+|oh+|hmm+|mmm+)\b/gi,
+    (m) => `<span class="disfluency">${m}</span>`);
+}
+
+// ============= Live Mic ============= //
+if (!SpeechRecognition) {
+  statusMessage.innerText = "❌ Web Speech API not supported. Use Chrome/Edge desktop.";
+  toggleButton.disabled = true;
+} else {
+  initRecognition(languageSelect.value);
+}
+
+function initRecognition(lang) {
+  recognition = new SpeechRecognition();
+  recognition.lang = lang;
+  recognition.continuous = true;
+  recognition.interimResults = true;
+
+  recognition.onstart = () => {
+    statusMessage.innerText = `🎙️ Listening… (${lang})`;
+  };
+
+  recognition.onerror = (e) => {
+    statusMessage.innerText = `⚠️ Error: ${e.error}`;
+  };
+
+  recognition.onend = () => {
+    if (isRecording) recognition.start(); // auto restart
+  };
+
+  recognition.onresult = (event) => {
+    let interim = "";
+    let final = "";
+
+    for (let i = event.resultIndex; i < event.results.length; i++) {
+      const text = event.results[i][0].transcript.trim();
+
+      if (event.results[i].isFinal) {
+        final += text + " ";
+      } else {
+        interim += text + " ";
+      }
+    }
+
+    if (interim) {
+      liveBuffer = interim;
+      statusMessage.innerText = "🎙️ Listening (interim)...";
+    }
+
+    if (final) {
+      const now = Date.now();
+      let prefix = " ";
+      if (lastTimestamp && now - lastTimestamp > 3000) prefix = "\n... ";
+
+      transcriptionOutput.innerHTML += prefix + highlightDisfluencies(final);
+      transcriptionOutput.scrollTop = transcriptionOutput.scrollHeight;
+
+      lastTimestamp = now;
+      liveBuffer = "";
+    }
+  };
+}
+
+toggleButton.addEventListener("click", () => {
+  if (isRecording) {
+    isRecording = false;
+    recognition.stop();
+    toggleButton.textContent = "🎤 Start Listening";
+  } else {
+    initRecognition(languageSelect.value);
+    recognition.start();
+    isRecording = true;
+    toggleButton.textContent = "⏹ Stop Listening";
+  }
+});
+
+clearButton.addEventListener("click", () => {
+  transcriptionOutput.innerHTML = "";
+  statusMessage.innerText = "Cleared.";
+});
+
+downloadButton.addEventListener("click", () => {
+  const text = transcriptionOutput.innerText;
+  const blob = new Blob([text], { type: "text/plain" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "transcription.txt";
+  a.click();
+});