Fix airband audio using async/await pattern from working code

- Convert startAirband to async function
- Add 300ms delay after backend start for stream readiness
- Properly reset audio element before connecting to stream
- Add both oncanplay and immediate play() for browser compatibility
- Add console logging for debugging
- Show visualizer container when audio starts

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

templates/adsb_dashboard.html

@@ -2987,7 +2987,7 @@ sudo make install</code>
             }
         }
 
-        function startAirband() {
+        async function startAirband() {
             const frequency = getAirbandFrequency();
             const device = parseInt(document.getElementById('airbandDeviceSelect').value);
             const squelch = parseInt(document.getElementById('airbandSquelch').value);
@@ -3007,62 +3007,78 @@ sudo make install</code>
             document.getElementById('airbandStatus').textContent = 'STARTING...';
             document.getElementById('airbandStatus').style.color = 'var(--accent-orange)';
 
-            fetch('/listening/audio/start', {
+            try {
-                method: 'POST',
+                // Start audio on backend
-                headers: { 'Content-Type': 'application/json' },
+                const response = await fetch('/listening/audio/start', {
-                body: JSON.stringify({
+                    method: 'POST',
-                    frequency: frequency,
+                    headers: { 'Content-Type': 'application/json' },
-                    modulation: 'am',  // Airband uses AM
+                    body: JSON.stringify({
-                    squelch: squelch,
+                        frequency: frequency,
-                    gain: 40,
+                        modulation: 'am',  // Airband uses AM
-                    device: device
+                        squelch: squelch,
-                })
+                        gain: 40,
-            })
+                        device: device
-            .then(r => r.json())
+                    })
-            .then(data => {
+                });
-                if (data.status === 'started') {
-                    isAirbandPlaying = true;
 
-                    // Start browser audio playback
+                const data = await response.json();
-                    const audioPlayer = document.getElementById('airbandPlayer');
+                console.log('[AIRBAND] Backend response:', data.status);
 
-                    // Stop any existing playback first
+                if (data.status !== 'started') {
-                    audioPlayer.pause();
-                    audioPlayer.currentTime = 0;
-
-                    audioPlayer.src = '/listening/audio/stream?' + Date.now();
-
-                    // Apply current volume setting
-                    const volume = parseInt(document.getElementById('airbandVolume').value) || 80;
-                    audioPlayer.volume = volume / 100;
-
-                    // Initialize visualizer before playing
-                    initAirbandVisualizer();
-
-                    // Wait for audio to be ready before playing
-                    audioPlayer.oncanplay = function() {
-                        audioPlayer.play().catch(e => {
-                            console.warn('Audio playback issue:', e);
-                            document.getElementById('airbandStatus').textContent = 'AUDIO BLOCKED';
-                            document.getElementById('airbandStatus').style.color = 'var(--accent-orange)';
-                        });
-                        audioPlayer.oncanplay = null;
-                    };
-
-                    document.getElementById('airbandBtn').innerHTML = '<span class="airband-icon">⏹</span> STOP';
-                    document.getElementById('airbandBtn').classList.add('active');
-                    document.getElementById('airbandStatus').textContent = frequency.toFixed(3) + ' MHz';
-                    document.getElementById('airbandStatus').style.color = 'var(--accent-green)';
-                } else {
                     document.getElementById('airbandStatus').textContent = 'ERROR';
                     document.getElementById('airbandStatus').style.color = 'var(--accent-red)';
                     alert('Airband Error: ' + (data.message || 'Failed to start'));
+                    return;
                 }
-            })
+
-            .catch(err => {
+                isAirbandPlaying = true;
+
+                // Wait for stream to be ready (backend needs time to start rtl_fm)
+                await new Promise(r => setTimeout(r, 300));
+
+                // Setup audio player
+                const audioPlayer = document.getElementById('airbandPlayer');
+
+                // Fully reset audio element
+                audioPlayer.oncanplay = null;
+                try { audioPlayer.pause(); } catch (e) {}
+                audioPlayer.removeAttribute('src');
+                audioPlayer.load();
+
+                // Connect to stream
+                const streamUrl = `/listening/audio/stream?t=${Date.now()}`;
+                console.log('[AIRBAND] Connecting to stream:', streamUrl);
+                audioPlayer.src = streamUrl;
+
+                // Apply current volume setting
+                const volume = parseInt(document.getElementById('airbandVolume').value) || 80;
+                audioPlayer.volume = volume / 100;
+
+                // Initialize visualizer
+                initAirbandVisualizer();
+
+                // Wait for audio to be ready then play
+                audioPlayer.oncanplay = () => {
+                    console.log('[AIRBAND] Audio can play');
+                    audioPlayer.play().catch(e => console.warn('[AIRBAND] Autoplay blocked:', e));
+                };
+
+                // Also try to play immediately (some browsers need this)
+                audioPlayer.play().catch(e => {
+                    console.log('[AIRBAND] Initial play blocked, waiting for canplay');
+                });
+
+                document.getElementById('airbandBtn').innerHTML = '<span class="airband-icon">⏹</span> STOP';
+                document.getElementById('airbandBtn').classList.add('active');
+                document.getElementById('airbandStatus').textContent = frequency.toFixed(3) + ' MHz';
+                document.getElementById('airbandStatus').style.color = 'var(--accent-green)';
+                document.getElementById('airbandVisualizerContainer').style.display = 'flex';
+
+            } catch (err) {
+                console.error('[AIRBAND] Error:', err);
                 document.getElementById('airbandStatus').textContent = 'ERROR';
                 document.getElementById('airbandStatus').style.color = 'var(--accent-red)';
-            });
+            }
         }
 
         function stopAirband() {