From 130bc8a51cf61c095d3e91a2b522695a2733bfdb Mon Sep 17 00:00:00 2001
From: Smittix <jamessmith1@outlook.com>
Date: Thu, 15 Jan 2026 16:03:51 +0000
Subject: [PATCH] Fix airband audio element - remove crossorigin, add controls

- Remove crossorigin="anonymous" attribute that may cause CORS issues
- Add controls attribute so user can manually play if autoplay blocked
- Show/hide audio player element when listening starts/stops
- Hide visualizer container on stop

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 templates/adsb_dashboard.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/templates/adsb_dashboard.html b/templates/adsb_dashboard.html
index 3abea2a..a8f3f2c 100644
--- a/templates/adsb_dashboard.html
+++ b/templates/adsb_dashboard.html
@@ -274,7 +274,7 @@
                     </div>
                 </div>
             </div>
-            <audio id="airbandPlayer" style="display: none;" crossorigin="anonymous"></audio>
+            <audio id="airbandPlayer" controls style="display: none; width: 100%; max-width: 300px; height: 32px; margin-top: 8px;"></audio>
         </div>
     </main>
 
@@ -3073,6 +3073,7 @@ sudo make install</code>
                 document.getElementById('airbandStatus').textContent = frequency.toFixed(3) + ' MHz';
                 document.getElementById('airbandStatus').style.color = 'var(--accent-green)';
                 document.getElementById('airbandVisualizerContainer').style.display = 'flex';
+                document.getElementById('airbandPlayer').style.display = 'block';
 
             } catch (err) {
                 console.error('[AIRBAND] Error:', err);
@@ -3089,6 +3090,7 @@ sudo make install</code>
             const audioPlayer = document.getElementById('airbandPlayer');
             audioPlayer.pause();
             audioPlayer.src = '';
+            audioPlayer.style.display = 'none';
 
             fetch('/listening/audio/stop', { method: 'POST' })
                 .then(r => r.json())
@@ -3098,6 +3100,7 @@ sudo make install</code>
                     document.getElementById('airbandBtn').classList.remove('active');
                     document.getElementById('airbandStatus').textContent = 'OFF';
                     document.getElementById('airbandStatus').style.color = 'var(--text-muted)';
+                    document.getElementById('airbandVisualizerContainer').style.display = 'none';
                 })
                 .catch(() => {});
         }