added play, see, replay bar for audio

frontend/js/voice.js

@@ -226,39 +226,130 @@ class VoiceManager {
     }
 
     /**
-     * Play pre-fetched audio URL with visual feedback.
+     * Play audio with an inline mini-player (progress bar, seek, replay).
+     * @param {string} audioUrl – blob URL from fetchAudio()
+     * @param {HTMLElement} [containerEl] – element to append the player into
+     * @returns {Promise} resolves when first playback ends
      */
-    async playAudio(audioUrl) {
+    async playAudio(audioUrl, containerEl) {
         if (!audioUrl) return;
 
         const audio = new Audio(audioUrl);
 
-        // Visual feedback
+        // Visual feedback — avatar pulse
         const avatarContainer = document.querySelector('.avatar-container');
         if (avatarContainer) avatarContainer.classList.add('speaking');
 
+        // ── Build player DOM ──────────────────────────────────────────
+        const player = document.createElement('div');
+        player.className = 'audio-player';
+
+        const playBtn = document.createElement('button');
+        playBtn.className = 'audio-player-btn playing';
+        playBtn.innerHTML = VoiceManager._pauseIcon();
+        playBtn.title = 'Pause';
+
+        const track = document.createElement('div');
+        track.className = 'audio-player-track';
+        const fill = document.createElement('div');
+        fill.className = 'audio-player-fill';
+        track.appendChild(fill);
+
+        const timeLabel = document.createElement('span');
+        timeLabel.className = 'audio-player-time';
+        timeLabel.textContent = '0:00 / 0:00';
+
+        player.appendChild(playBtn);
+        player.appendChild(track);
+        player.appendChild(timeLabel);
+
+        if (containerEl) {
+            containerEl.appendChild(player);
+        }
+
+        // ── Helpers ───────────────────────────────────────────────────
+        function fmt(s) {
+            if (!isFinite(s)) return '0:00';
+            const m = Math.floor(s / 60);
+            const sec = Math.floor(s % 60);
+            return `${m}:${sec.toString().padStart(2, '0')}`;
+        }
+
+        function updateProgress() {
+            if (!audio.duration) return;
+            const pct = (audio.currentTime / audio.duration) * 100;
+            fill.style.width = pct + '%';
+            timeLabel.textContent = `${fmt(audio.currentTime)} / ${fmt(audio.duration)}`;
+        }
+
+        // ── Events ────────────────────────────────────────────────────
+        audio.addEventListener('timeupdate', updateProgress);
+
+        audio.addEventListener('loadedmetadata', () => {
+            timeLabel.textContent = `0:00 / ${fmt(audio.duration)}`;
+        });
+
+        // Seek on track click
+        track.addEventListener('click', (e) => {
+            const rect = track.getBoundingClientRect();
+            const pct = (e.clientX - rect.left) / rect.width;
+            audio.currentTime = pct * audio.duration;
+            updateProgress();
+        });
+
+        // Play/pause toggle
+        playBtn.addEventListener('click', () => {
+            if (audio.paused) {
+                audio.play();
+                playBtn.classList.add('playing');
+                playBtn.innerHTML = VoiceManager._pauseIcon();
+                playBtn.title = 'Pause';
+                if (avatarContainer) avatarContainer.classList.add('speaking');
+            } else {
+                audio.pause();
+                playBtn.classList.remove('playing');
+                playBtn.innerHTML = VoiceManager._playIcon();
+                playBtn.title = 'Play';
+                if (avatarContainer) avatarContainer.classList.remove('speaking');
+            }
+        });
+
+        // ── Playback ──────────────────────────────────────────────────
         try {
             await audio.play();
             return new Promise(resolve => {
                 audio.onended = () => {
                     if (avatarContainer) avatarContainer.classList.remove('speaking');
-                    URL.revokeObjectURL(audioUrl);
+                    playBtn.classList.remove('playing');
+                    playBtn.innerHTML = VoiceManager._playIcon();
+                    playBtn.title = 'Replay';
+                    fill.style.width = '100%';
+                    // Reset to beginning for replay
+                    audio.currentTime = 0;
                     resolve();
                 };
-                // Handle errors during playback (e.g. format issues)
                 audio.onerror = () => {
                     if (avatarContainer) avatarContainer.classList.remove('speaking');
-                    URL.revokeObjectURL(audioUrl);
                     resolve();
-                }
+                };
             });
         } catch (e) {
-            console.error("Playback failed", e);
+            console.error('Playback failed', e);
             if (avatarContainer) avatarContainer.classList.remove('speaking');
-            URL.revokeObjectURL(audioUrl);
+            playBtn.classList.remove('playing');
+            playBtn.innerHTML = VoiceManager._playIcon();
         }
     }
 
+    // ── SVG icons (inline, no external deps) ──────────────────────────
+    static _playIcon() {
+        return `<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="6,3 20,12 6,21"/></svg>`;
+    }
+
+    static _pauseIcon() {
+        return `<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="5" y="3" width="4" height="18"/><rect x="15" y="3" width="4" height="18"/></svg>`;
+    }
+
     /**
      * Legacy method for backward compatibility if needed, 
      * or for simple direct speech.