computertech/techdj
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix audio autoplay blocking by creating AudioContext only on user interaction

Browse Source
This commit is contained in:
3nd3r
2026-01-02 21:36:26 -06:00
parent e8163fb9a2
commit 1a1f389ab7
1 changed files with 20 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
script.js
View File

@@ -2090,16 +2090,7 @@ function initListenerMode() {
document.body.classList.add('listening-active'); // For global CSS targeting document.body.classList.add('listening-active'); // For global CSS targeting
updateGlowIntensity(settings.glowIntensity || 30); updateGlowIntensity(settings.glowIntensity || 30);
// Setup Audio Context for volume/routing (only if not already created) // AudioContext will be created when user enables audio to avoid suspension
if (!listenerAudioContext) {
listenerAudioContext = new (window.AudioContext || window.webkitAudioContext)();
listenerGainNode = listenerAudioContext.createGain();
listenerGainNode.gain.value = 0.8;
listenerGainNode.connect(listenerAudioContext.destination);
console.log('🎵 Created new AudioContext for listener mode');
} else {
console.log('♻️ Reusing existing AudioContext');
}
// Create or reuse audio element to handle the MediaSource // Create or reuse audio element to handle the MediaSource
let audio; let audio;
@@ -2122,16 +2113,7 @@ function initListenerMode() {
document.body.appendChild(audio); document.body.appendChild(audio);
console.log('🆕 Created new audio element'); console.log('🆕 Created new audio element');
// Bridge Audio Element to AudioContext (only for new elements) // AudioContext will be created later on user interaction
// Note: createMediaElementSource can only be called once per audio element
try {
const sourceNode = listenerAudioContext.createMediaElementSource(audio);
sourceNode.connect(listenerGainNode);
console.log('🔗 Connected audio element to AudioContext');
} catch (e) {
console.error('❌ Failed to create MediaElementSource:', e.message);
// This is a critical error, but continue anyway
}
} }
// Initialize MediaSource for streaming binary chunks // Initialize MediaSource for streaming binary chunks
@@ -2311,7 +2293,24 @@ async function enableListenerAudio() {
console.log('✅ Audio context resumed'); console.log('✅ Audio context resumed');
} }
// 3. Prepare and start audio playback // 3. Bridge Audio Element to AudioContext if not already connected
if (window.listenerAudio && !window.listenerAudio._connectedToContext) {
try {
const sourceNode = listenerAudioContext.createMediaElementSource(window.listenerAudio);
if (!listenerGainNode) {
listenerGainNode = listenerAudioContext.createGain();
listenerGainNode.gain.value = 0.8;
listenerGainNode.connect(listenerAudioContext.destination);
}
sourceNode.connect(listenerGainNode);
window.listenerAudio._connectedToContext = true;
console.log('🔗 Connected audio element to AudioContext');
} catch (e) {
console.warn('⚠️ Could not connect to AudioContext:', e.message);
}
}
// 4. Prepare and start audio playback
if (window.listenerAudio) { if (window.listenerAudio) {
console.log('📊 Audio element state:', { console.log('📊 Audio element state:', {
readyState: window.listenerAudio.readyState, readyState: window.listenerAudio.readyState,