Fallback to MP3 stream on NotSupportedError

script.js

@@ -2456,15 +2456,35 @@ async function enableListenerAudio() {
             
             stashedStatus.textContent = '⚠️ ' + errorMsg;
             
-            // If it was a NotSupportedError (likely empty buffer), we can try to recover automatically
-            // by waiting for data and trying to play again (even if it might fail without gesture)
             if (error.name === 'NotSupportedError') {
+                // Two common causes:
+                // 1) WebM/Opus MSE isn't supported by this browser
+                // 2) The element cannot play yet (empty buffer / transient)
+                // Prefer a compatibility fallback to MP3 if available.
+                try {
+                    const fallbackUrl = getMp3FallbackUrl();
+                    console.log(`🎧 NotSupportedError -> switching to MP3 fallback: ${fallbackUrl}`);
+                    window.listenerAudio.src = fallbackUrl;
+                    window.listenerAudio.load();
+
+                    // Retry immediately (still within the click gesture)
+                    window.listenerAudio.play().then(() => {
+                        stashedStatus.textContent = '🟢 Playing via MP3 fallback';
+                        window.listenerAudioEnabled = true;
+                    }).catch((e) => {
+                        console.error('MP3 fallback play failed:', e);
+                        stashedStatus.textContent = '⚠️ MP3 fallback failed. Is ffmpeg installed on the server?';
+                    });
+                } catch (e) {
+                    console.error('Failed to switch to MP3 fallback:', e);
+                }
+
+                // Also keep a background retry in case it was just a buffer timing issue.
                 console.log('🔄 Retrying playback in background once data arrives...');
                 const retryInterval = setInterval(() => {
                     if (window.listenerAudio.buffered && window.listenerAudio.buffered.length > 0) {
                         clearInterval(retryInterval);
-                        window.listenerAudio.play().catch(e => console.error('Background retry failed:', e));
+                        window.listenerAudio.play().catch((e) => console.error('Background retry failed:', e));
-                        stashedStatus.textContent = '🟢 Recovered - Playing';
                     }
                 }, 1000);
             }