Update app.js

app.js

@@ -295,6 +295,83 @@ function cleanTextForTTS(rawText) {
   return ensureDevanagariForTTS(cleaned);
 }
 
+// ============================================================
+// FLOATING AUDIO PILL CONTROLLER
+// ============================================================
+const audioPlayerBar = $('audio-player-bar');
+const playerToggleBtn = $('player-toggle-btn');
+const playerPlayIcon = $('player-play-icon');
+const playerPauseIcon = $('player-pause-icon');
+const playerTimer = $('player-timer');
+const playerSeeker = $('player-seeker');
+const playerCloseBtn = $('player-close-btn');
+
+function formatAudioTime(seconds) {
+  if (isNaN(seconds)) return "00:00";
+  const m = Math.floor(seconds / 60).toString().padStart(2, '0');
+  const s = Math.floor(seconds % 60).toString().padStart(2, '0');
+  return `${m}:${s}`;
+}
+
+function bindAudioToPlayer(audio) {
+  if (!audioPlayerBar) return;
+  audioPlayerBar.classList.remove('hidden');
+
+  audio.ontimeupdate = () => {
+    playerTimer.textContent = formatAudioTime(audio.currentTime);
+    if (audio.duration) {
+      playerSeeker.value = (audio.currentTime / audio.duration) * 100;
+    }
+  };
+
+  audio.onplay = () => {
+    playerPlayIcon.classList.add('hidden');
+    playerPauseIcon.classList.remove('hidden');
+  };
+
+  audio.onpause = () => {
+    playerPlayIcon.classList.remove('hidden');
+    playerPauseIcon.classList.add('hidden');
+  };
+
+  audio.onended = () => {
+    audioPlayerBar.classList.add('hidden');
+    playerSeeker.value = 0;
+    playerTimer.textContent = "00:00";
+    if (activeTtsBtn) activeTtsBtn.innerHTML = `🔊 Listen`;
+    currentAudio = null;
+    activeTtsBtn = null;
+  };
+}
+
+on('player-toggle-btn', 'click', () => {
+  if (!currentAudio) return;
+  if (currentAudio.paused) {
+    currentAudio.play();
+  } else {
+    currentAudio.pause();
+  }
+});
+
+if (playerSeeker) {
+  playerSeeker.oninput = () => {
+    if (currentAudio && currentAudio.duration) {
+      currentAudio.currentTime = (playerSeeker.value / 100) * currentAudio.duration;
+    }
+  };
+}
+
+on('player-close-btn', 'click', () => {
+  if (currentAudio) {
+    currentAudio.pause();
+    currentAudio.currentTime = 0;
+    currentAudio = null;
+  }
+  if (activeTtsBtn) activeTtsBtn.innerHTML = `🔊 Listen`;
+  activeTtsBtn = null;
+  audioPlayerBar.classList.add('hidden');
+});
+
 async function playBodoSpeech(btn, text) {
   if (activeTtsBtn === btn && currentAudio && !currentAudio.paused) {
     currentAudio.pause();
@@ -312,10 +389,11 @@ async function playBodoSpeech(btn, text) {
     btn.disabled = false;
     btn.innerHTML = `⏹ Stop`;
     currentAudio = new Audio(ttsAudioCache.get(cleanText));
+    bindAudioToPlayer(currentAudio);
+    const cachedBaseOnEnded = currentAudio.onended;
     currentAudio.onended = () => {
+      cachedBaseOnEnded && cachedBaseOnEnded();
       btn.innerHTML = `🔊 Listen`;
-      activeTtsBtn = null;
-      currentAudio = null;
     };
     try { await currentAudio.play(); } catch { btn.innerHTML = `⚠️ Retry`; }
     return;
@@ -340,10 +418,11 @@ async function playBodoSpeech(btn, text) {
     btn.disabled = false;
     btn.innerHTML = `⏹ Stop`;
     currentAudio = new Audio(audioUrl);
+    bindAudioToPlayer(currentAudio);
+    const freshBaseOnEnded = currentAudio.onended;
     currentAudio.onended = () => {
+      freshBaseOnEnded && freshBaseOnEnded();
       btn.innerHTML = `🔊 Listen`;
-      activeTtsBtn = null;
-      currentAudio = null;
     };
     await currentAudio.play();
   } catch (err) {