Add MP3 fallback stream when Opus unsupported

script.js

@@ -1546,6 +1546,11 @@ let autoStartStream = false;
 let listenerAudioContext = null;
 let listenerGainNode = null;
 let listenerChunksReceived = 0;
+let currentStreamMimeType = null;
+
+function getMp3FallbackUrl() {
+    return `${window.location.protocol}//${window.location.hostname}:5001/stream.mp3`;
+}
 
 // Initialize SocketIO connection
 function initSocket() {
@@ -1782,8 +1787,30 @@ function startBroadcast() {
         const selectedBitrate = parseInt(qualitySelect.value) * 1000; // Convert kbps to bps
         console.log(`🎚️ Starting broadcast at ${qualitySelect.value}kbps`);
 
+        const preferredTypes = [
+            'audio/webm;codecs=opus',
+            'audio/webm',
+            'audio/ogg;codecs=opus',
+            'audio/mp4;codecs=mp4a.40.2',
+            'audio/mp4',
+        ];
+        const chosenType = preferredTypes.find((t) => {
+            try {
+                return MediaRecorder.isTypeSupported(t);
+            } catch {
+                return false;
+            }
+        });
+
+        if (!chosenType) {
+            throw new Error('No supported MediaRecorder mimeType found on this browser');
+        }
+
+        currentStreamMimeType = chosenType;
+        console.log(`🎛️ Using broadcast mimeType: ${currentStreamMimeType}`);
+
         mediaRecorder = new MediaRecorder(stream, {
-            mimeType: 'audio/webm;codecs=opus',
+            mimeType: currentStreamMimeType,
             audioBitsPerSecond: selectedBitrate
         });
 
@@ -1906,9 +1933,9 @@ function startBroadcast() {
         document.getElementById('broadcast-status').textContent = '🔴 LIVE';
         document.getElementById('broadcast-status').classList.add('live');
 
-        // Notify server
+        // Notify server (include codec/container so listeners can configure SourceBuffer)
         if (!socket) initSocket();
-        socket.emit('start_broadcast');
+        socket.emit('start_broadcast', { mimeType: currentStreamMimeType });
         socket.emit('get_listener_count');
 
         console.log('✅ Broadcasting started successfully!');
@@ -2139,13 +2166,18 @@ function initListenerMode() {
 
     mediaSource.addEventListener('sourceopen', () => {
         console.log('📦 MediaSource opened');
-        const mimeType = 'audio/webm;codecs=opus';
+        const mimeType = window.currentStreamMimeType || currentStreamMimeType || 'audio/webm;codecs=opus';
         
         if (!MediaSource.isTypeSupported(mimeType)) {
             console.error(`❌ Browser does not support ${mimeType}`);
             const statusEl = document.getElementById('connection-status');
-            if (statusEl) statusEl.textContent = '❌ Error: Browser does not support WebM/Opus audio';
-            alert('Your browser does not support WebM/Opus audio format. Please try Chrome, Firefox, or Edge.');
+            if (statusEl) statusEl.textContent = '⚠️ WebM/Opus not supported - using MP3 fallback stream';
+
+            // Fallback to MP3 stream served by the backend (requires ffmpeg on server host)
+            const fallbackUrl = getMp3FallbackUrl();
+            console.log(`🎧 Switching to MP3 fallback: ${fallbackUrl}`);
+            audio.src = fallbackUrl;
+            audio.load();
             return;
         }
 
@@ -2203,6 +2235,14 @@ function initListenerMode() {
     initSocket();
     socket.emit('join_listener');
 
+    socket.on('stream_mime', (data) => {
+        const mt = data && data.mimeType ? String(data.mimeType) : null;
+        if (mt && mt !== window.currentStreamMimeType) {
+            console.log(`📡 Stream mimeType announced: ${mt}`);
+            window.currentStreamMimeType = mt;
+        }
+    });
+
     let hasHeader = false;
 
     socket.on('audio_data', (data) => {