Prompt user to enable audio playback

static/js/modes/listening-post.js

@@ -27,6 +27,7 @@ let audioWebSocket = null;
 let audioQueue = [];
 let isWebSocketAudio = false;
 let audioFetchController = null;
+let audioUnlockRequested = false;
 
 // Visualizer state
 let visualizerContext = null;
@@ -1861,9 +1862,8 @@ function toggleDirectListen() {
             audioPlayer.muted = false;
             audioPlayer.autoplay = true;
             audioPlayer.preload = 'auto';
-            // Ensure Chrome treats this as a user-initiated playback
-            audioPlayer.play().catch(() => {});
         }
+        audioUnlockRequested = true;
         // First press - start immediately, don't debounce
         startDirectListenImmediate();
     }
@@ -2149,13 +2149,11 @@ async function _startDirectListenInternal() {
         // Wait for audio to be ready then play
         audioPlayer.oncanplay = () => {
             console.log('[LISTEN] Audio can play');
-            audioPlayer.play().catch(e => console.warn('[LISTEN] Autoplay blocked:', e));
+            attemptAudioPlay(audioPlayer);
         };
 
         // Also try to play immediately (some browsers need this)
-        audioPlayer.play().catch(e => {
+        attemptAudioPlay(audioPlayer);
-            console.log('[LISTEN] Initial play blocked, waiting for canplay');
-        });
 
         // Fallback: if stream never starts, try fetch-based stream
         setTimeout(async () => {
@@ -2191,6 +2189,36 @@ async function _startDirectListenInternal() {
     }
 }
 
+function attemptAudioPlay(audioPlayer) {
+    if (!audioPlayer) return;
+    audioPlayer.play().then(() => {
+        hideAudioUnlock();
+    }).catch(() => {
+        // Autoplay likely blocked; show manual unlock
+        showAudioUnlock(audioPlayer);
+    });
+}
+
+function showAudioUnlock(audioPlayer) {
+    const unlockBtn = document.getElementById('audioUnlockBtn');
+    if (!unlockBtn || !audioUnlockRequested) return;
+    unlockBtn.style.display = 'block';
+    unlockBtn.onclick = () => {
+        audioPlayer.muted = false;
+        audioPlayer.play().then(() => {
+            hideAudioUnlock();
+        }).catch(() => {});
+    };
+}
+
+function hideAudioUnlock() {
+    const unlockBtn = document.getElementById('audioUnlockBtn');
+    if (unlockBtn) {
+        unlockBtn.style.display = 'none';
+    }
+    audioUnlockRequested = false;
+}
+
 async function startFetchAudioStream(streamUrl, audioPlayer) {
     if (!window.MediaSource) {
         console.warn('[LISTEN] MediaSource not supported for fetch fallback');

templates/index.html

@@ -1055,6 +1055,10 @@
                                             Audio Output</div>
                                     </div>
                                     <audio id="scannerAudioPlayer" style="width: 100%; height: 28px;" controls></audio>
+                                    <button id="audioUnlockBtn" type="button"
+                                        style="display: none; margin-top: 8px; width: 100%; padding: 6px 10px; font-size: 10px; letter-spacing: 1px; background: var(--accent-cyan); color: #000; border: 1px solid var(--accent-cyan); border-radius: 4px; cursor: pointer;">
+                                        CLICK TO ENABLE AUDIO
+                                    </button>
                                     <div style="display: flex; align-items: center; gap: 8px; margin-top: 8px;">
                                         <span style="font-size: 7px; color: var(--text-muted);">LEVEL</span>
                                         <div