lord3nd3r/techdj-test
1
0
Fork 0
forked from computertech/techdj
Code Pull Requests Activity

Fix browser blocked audio by calling play() immediately on user gesture

Browse Source
This commit is contained in:
3nd3r
2026-01-02 21:50:59 -06:00
parent 41d2d57b7e
commit f048be3640
1 changed files with 17 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
script.js
View File

@@ -2344,50 +2344,32 @@ async function enableListenerAudio() {
return window.listenerAudio.buffered && window.listenerAudio.buffered.length > 0; return window.listenerAudio.buffered && window.listenerAudio.buffered.length > 0;
}; };
// If no buffered data yet, wait a bit for it to arrive // Attempt playback IMMEDIATELY to capture user gesture
// We do this before waiting for data so we don't lose the "user interaction" token
console.log('▶️ Attempting to play audio...');
const playPromise = window.listenerAudio.play();
// If no buffered data yet, show status but don't block playback
if (!hasBufferedData()) { if (!hasBufferedData()) {
console.log('⏳ Waiting for audio data to buffer...'); console.log('⏳ Waiting for audio data to buffer...');
if (audioText) { if (audioText) {
audioText.textContent = chunksReceived > 0 ? 'BUFFERING...' : 'WAITING FOR STREAM...'; audioText.textContent = chunksReceived > 0 ? 'BUFFERING...' : 'WAITING FOR STREAM...';
} }
// Wait up to 10 seconds for data to arrive (increased from 5) // Start a background checker to update UI
const waitForData = new Promise((resolve) => {
let attempts = 0;
const maxAttempts = 100; // 10 seconds (100 * 100ms)
const checkInterval = setInterval(() => { const checkInterval = setInterval(() => {
attempts++;
if (audioText && chunksReceived > 0 && audioText.textContent === 'WAITING FOR STREAM...') {
audioText.textContent = 'BUFFERING...';
}
if (attempts % 10 === 0) { // Log every second
console.log(`⏱️ Attempt ${attempts}/${maxAttempts} - Buffered: ${window.listenerAudio.buffered.length}, ReadyState: ${window.listenerAudio.readyState}`);
}
if (hasBufferedData()) { if (hasBufferedData()) {
clearInterval(checkInterval); clearInterval(checkInterval);
console.log('✅ Audio data buffered, ready to play'); console.log('✅ Audio data buffered');
resolve(); } else if (audioText && chunksReceived > 0 && audioText.textContent === 'WAITING FOR STREAM...') {
} else if (attempts >= maxAttempts) { audioText.textContent = 'BUFFERING...';
clearInterval(checkInterval);
// Don't reject - try to play anyway, MediaSource might handle it
console.warn('⚠️ Timeout waiting for buffered data, attempting playback anyway...');
resolve();
} }
}, 100); }, 500);
});
await waitForData;
} else { } else {
console.log('✅ Audio already has buffered data'); console.log('✅ Audio already has buffered data');
} }
// Attempt playback await playPromise;
console.log('▶️ Attempting to play audio...');
await window.listenerAudio.play();
console.log('✅ Audio playback started successfully'); console.log('✅ Audio playback started successfully');
// Mark audio as enabled so status updates can now display // Mark audio as enabled so status updates can now display