hmm

script.js

@@ -2097,6 +2097,12 @@ function initListenerMode() {
     const mediaSource = new MediaSource();
     audio.src = URL.createObjectURL(mediaSource);
 
+    // CRITICAL: Call load() to initialize the MediaSource
+    // Without this, the audio element won't load the MediaSource until play() is called,
+    // which will fail with "no supported sources" if no data is buffered yet
+    audio.load();
+    console.log('🎬 Audio element loading MediaSource...');
+
     let sourceBuffer = null;
     let audioQueue = [];
     let chunksReceived = 0;
@@ -2271,8 +2277,16 @@ async function enableListenerAudio() {
             console.log('✅ Audio context resumed');
         }
 
-        // 3. Wait for buffered data before attempting playback
+        // 3. Prepare and start audio playback
         if (window.listenerAudio) {
+            console.log('📊 Audio element state:', {
+                readyState: window.listenerAudio.readyState,
+                networkState: window.listenerAudio.networkState,
+                src: window.listenerAudio.src ? 'set' : 'not set',
+                buffered: window.listenerAudio.buffered.length,
+                paused: window.listenerAudio.paused
+            });
+
             // Unmute just in case
             window.listenerAudio.muted = false;
             window.listenerAudio.volume = settings.volume || 0.8;
@@ -2282,33 +2296,43 @@ async function enableListenerAudio() {
                 return window.listenerAudio.buffered && window.listenerAudio.buffered.length > 0;
             };
 
+            // If no buffered data yet, wait a bit for it to arrive
             if (!hasBufferedData()) {
                 console.log('⏳ Waiting for audio data to buffer...');
                 if (audioText) audioText.textContent = 'WAITING FOR STREAM...';
 
-                // Wait up to 5 seconds for data to arrive
-                const waitForData = new Promise((resolve, reject) => {
+                // Wait up to 10 seconds for data to arrive (increased from 5)
+                const waitForData = new Promise((resolve) => {
                     let attempts = 0;
-                    const maxAttempts = 50; // 5 seconds (50 * 100ms)
+                    const maxAttempts = 100; // 10 seconds (100 * 100ms)
 
                     const checkInterval = setInterval(() => {
                         attempts++;
 
+                        if (attempts % 10 === 0) { // Log every second
+                            console.log(`⏱️ Attempt ${attempts}/${maxAttempts} - Buffered: ${window.listenerAudio.buffered.length}, ReadyState: ${window.listenerAudio.readyState}`);
+                        }
+
                         if (hasBufferedData()) {
                             clearInterval(checkInterval);
                             console.log('✅ Audio data buffered, ready to play');
                             resolve();
                         } else if (attempts >= maxAttempts) {
                             clearInterval(checkInterval);
-                            reject(new Error('Timeout waiting for audio data'));
+                            // Don't reject - try to play anyway, MediaSource might handle it
+                            console.warn('⚠️ Timeout waiting for buffered data, attempting playback anyway...');
+                            resolve();
                         }
                     }, 100);
                 });
 
                 await waitForData;
+            } else {
+                console.log('✅ Audio already has buffered data');
             }
 
             // Attempt playback
+            console.log('▶️ Attempting to play audio...');
             await window.listenerAudio.play();
             console.log('✅ Audio playback started successfully');