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>
This commit is contained in:
Smittix
2026-01-15 15:54:28 +00:00
parent 4018f95723
commit 4224418e6f

View File

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