Audio Controls with Auto-Play and Speed Management

Controls audio playback with speed adjustment and enhanced auto-play methods
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         Audio Controls with Auto-Play and Speed Management
// @namespace    http://tampermonkey.net/
// @version      2.4
// @description  Controls audio playback with speed adjustment and enhanced auto-play methods
// @author       You
// @match        https://inovel*.com/*
// @grant        none
// ==/UserScript==
 
(function() {
    'use strict';
 
    // Configuration
    const DEFAULT_PLAYBACK_RATE = 0.7;
    const AUTO_PLAY_DELAY = 5000; // 5 seconds
    const AUDIO_SELECTOR = 'audio[controls]';
    const MAX_RETRY_ATTEMPTS = 3; // Maximum number of retry attempts
    const RETRY_DELAY = 1000; // Delay between retries in milliseconds
    const RATE_CHECK_INTERVAL = 800; // Check playback rate every 800ms
    const INACTIVITY_TIMEOUT = 7000; // Auto-minimize after 4 seconds of inactivity
 
    // New autoplay configuration
    const AUTOPLAY_METHOD_TIMEOUT = 2000; // Timeout between different autoplay methods
    const USE_INTERACTION_METHOD = true;   // Method 1: User interaction simulation
    const USE_PROGRESSIVE_LOAD = true;     // Method 2: Progressive loading
    const USE_AUDIO_CONTEXT = true;        // Method 3: Web Audio API
 
    // State variables
    let audioElement = null;
    let playbackRate = parseFloat(localStorage.getItem('audio_playback_rate')) || DEFAULT_PLAYBACK_RATE;
    let isMinimized = localStorage.getItem('audio_controls_minimized') === 'true' || false;
    let countdownTimer = null;
    let rateCheckInterval = null;
    let retryAttempts = 0;
    let hasUserInteracted = false;
    let lastRateApplication = 0;
    let inactivityTimer = null;
    let audioContext = null; // Store AudioContext instance
 
    // Position settings - load from localStorage or use defaults
    let bubblePosition = JSON.parse(localStorage.getItem('audio_bubble_position')) || { top: '20px', left: '20px' };
 
    // Create main container for all controls
    const mainContainer = document.createElement('div');
    mainContainer.style.cssText = `
        position: fixed;
        z-index: 9999;
        font-family: Arial, sans-serif;
    `;
    document.body.appendChild(mainContainer);
 
    // Create the expanded control panel
    const controlPanel = document.createElement('div');
    controlPanel.className = 'audio-control-panel';
    controlPanel.style.cssText = `
        background-color: rgba(0, 0, 0, 0.7);
        padding: 10px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 120px;
    `;
 
    // Create version display at the top (more compact)
    const versionDisplay = document.createElement('div');
    versionDisplay.style.cssText = `
        color: #aaaaaa;
        font-size: 9px;
        text-align: right;
        margin: 0 0 2px 0;
        font-style: italic;
    `;
    versionDisplay.textContent = `v2.4`;
    controlPanel.appendChild(versionDisplay);
 
    // Create the minimized bubble view
    const bubbleView = document.createElement('div');
    bubbleView.className = 'audio-bubble';
    bubbleView.style.cssText = `
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        user-select: none;
    `;
 
    // Create bubble icon
    const bubbleIcon = document.createElement('div');
    bubbleIcon.style.cssText = `
        font-size: 20px;
        color: white;
    `;
    bubbleIcon.innerHTML = '🔊';  // Will be updated based on audio state
    bubbleView.appendChild(bubbleIcon);
 
    // Create countdown/message display
    const countdownDisplay = document.createElement('div');
    countdownDisplay.style.cssText = `
        color: #ffcc00;
        font-size: 12px;
        text-align: center;
        margin-bottom: 5px;
        font-weight: bold;
        height: 18px; /* Fixed height to prevent layout shifts */
    `;
    countdownDisplay.textContent = '';
    controlPanel.appendChild(countdownDisplay);
 
    // Create play/pause button (icon only)
    const playPauseButton = document.createElement('button');
    playPauseButton.style.cssText = `
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 8px 0;
        text-align: center;
        font-size: 18px;
        border-radius: 4px;
        cursor: pointer;
        width: 100%;
    `;
    playPauseButton.innerHTML = '▶️';
    controlPanel.appendChild(playPauseButton);
 
    // Create speed control container
    const speedControlContainer = document.createElement('div');
    speedControlContainer.style.cssText = `
        display: flex;
        gap: 5px;
        width: 100%;
    `;
    controlPanel.appendChild(speedControlContainer);
 
    // Create speed down button (icon only)
    const speedDownButton = document.createElement('button');
    speedDownButton.style.cssText = `
        background-color: #795548;
        border: none;
        color: white;
        padding: 6px 0;
        text-align: center;
        font-size: 18px;
        border-radius: 4px;
        cursor: pointer;
        flex: 1;
    `;
    speedDownButton.innerHTML = '🐢';
    speedControlContainer.appendChild(speedDownButton);
 
    // Create speed up button (icon only)
    const speedUpButton = document.createElement('button');
    speedUpButton.style.cssText = `
        background-color: #009688;
        border: none;
        color: white;
        padding: 6px 0;
        text-align: center;
        font-size: 18px;
        border-radius: 4px;
        cursor: pointer;
        flex: 1;
    `;
    speedUpButton.innerHTML = '🐇';
    speedControlContainer.appendChild(speedUpButton);
 
    // Create speed display
    const speedDisplay = document.createElement('div');
    speedDisplay.style.cssText = `
        color: white;
        font-size: 12px;
        text-align: center;
        margin-top: 2px;
    `;
    speedDisplay.textContent = `${playbackRate.toFixed(1)}x`;
    controlPanel.appendChild(speedDisplay);
 
    // Create minimize button (icon only)
    const minimizeButton = document.createElement('button');
    minimizeButton.style.cssText = `
        background-color: #607D8B;
        border: none;
        color: white;
        padding: 4px 0;
        text-align: center;
        font-size: 14px;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 5px;
    `;
    minimizeButton.innerHTML = '−';
    controlPanel.appendChild(minimizeButton);
 
    // Function to reset the inactivity timer
    function resetInactivityTimer() {
        if (inactivityTimer) {
            clearTimeout(inactivityTimer);
            inactivityTimer = null;
        }
 
        if (!isMinimized) {
            inactivityTimer = setTimeout(() => {
                toggleMinimized(); // Auto-minimize after timeout
            }, INACTIVITY_TIMEOUT);
        }
    }
 
    // Function to toggle between expanded and minimized views
    function toggleMinimized() {
        isMinimized = !isMinimized;
        updateViewState();
 
        // Reset inactivity timer when toggling
        resetInactivityTimer();
 
        // Save state to localStorage
        localStorage.setItem('audio_controls_minimized', isMinimized);
    }
 
    // Function to update the current view based on minimized state
    function updateViewState() {
        // Clear the container first
        while (mainContainer.firstChild) {
            mainContainer.removeChild(mainContainer.firstChild);
        }
 
        if (isMinimized) {
            // Show bubble view
            mainContainer.appendChild(bubbleView);
 
            // Set position based on saved values
            mainContainer.style.top = bubblePosition.top;
            mainContainer.style.left = bubblePosition.left;
            mainContainer.style.right = 'auto';
            mainContainer.style.bottom = 'auto';
 
            // Clear any inactivity timer
            if (inactivityTimer) {
                clearTimeout(inactivityTimer);
                inactivityTimer = null;
            }
        } else {
            // Show expanded control panel
            mainContainer.appendChild(controlPanel);
 
            // If coming from minimized state, place in the same position
            // Otherwise use default bottom right
            if (bubblePosition) {
                mainContainer.style.top = bubblePosition.top;
                mainContainer.style.left = bubblePosition.left;
                mainContainer.style.right = 'auto';
                mainContainer.style.bottom = 'auto';
            } else {
                mainContainer.style.top = 'auto';
                mainContainer.style.left = 'auto';
                mainContainer.style.right = '20px';
                mainContainer.style.bottom = '20px';
            }
 
            // Start inactivity timer
            resetInactivityTimer();
        }
    }
 
    // Make only the bubble draggable
    let isDragging = false;
    let dragOffsetX = 0;
    let dragOffsetY = 0;
 
    bubbleView.addEventListener('mousedown', function(e) {
        // Only initiate drag if user holds for a brief moment
        setTimeout(() => {
            if (e.buttons === 1) { // Left mouse button
                isDragging = true;
                dragOffsetX = e.clientX - mainContainer.getBoundingClientRect().left;
                dragOffsetY = e.clientY - mainContainer.getBoundingClientRect().top;
                bubbleView.style.cursor = 'grabbing';
            }
        }, 100);
    });
 
    document.addEventListener('mousemove', function(e) {
        if (!isDragging || !isMinimized) return;
 
        e.preventDefault();
 
        // Only allow vertical movement (Y-axis)
        const newTop = e.clientY - dragOffsetY;
 
        // Keep within viewport bounds
        const maxY = window.innerHeight - bubbleView.offsetHeight;
 
        // Only update Y position, keep X position the same
        mainContainer.style.top = `${Math.max(0, Math.min(maxY, newTop))}px`;
    });
 
    document.addEventListener('mouseup', function(event) {
        if (isDragging && isMinimized) {
            isDragging = false;
            bubbleView.style.cursor = 'pointer';
 
            // Save the position (only top changes, left stays the same)
            bubblePosition = {
                top: mainContainer.style.top,
                left: bubblePosition.left // Keep the same left position
            };
            localStorage.setItem('audio_bubble_position', JSON.stringify(bubblePosition));
 
            // Prevent click if we were dragging
            event.preventDefault();
            return false;
        } else if (isMinimized && (event.target === bubbleView || bubbleView.contains(event.target))) {
            // If it was a click (not drag) on the bubble, expand
            toggleMinimized();
        }
    });
 
    // Add touch support for mobile devices - only for bubble
    bubbleView.addEventListener('touchstart', function(e) {
        const touch = e.touches[0];
        isDragging = true;
        dragOffsetX = touch.clientX - mainContainer.getBoundingClientRect().left;
        dragOffsetY = touch.clientY - mainContainer.getBoundingClientRect().top;
 
        // Prevent scrolling while dragging
        e.preventDefault();
    });
 
    document.addEventListener('touchmove', function(e) {
        if (!isDragging || !isMinimized) return;
 
        const touch = e.touches[0];
 
        // Only allow vertical movement (Y-axis)
        const newTop = touch.clientY - dragOffsetY;
 
        // Keep within viewport bounds
        const maxY = window.innerHeight - bubbleView.offsetHeight;
 
        // Only update Y position, keep X position the same
        mainContainer.style.top = `${Math.max(0, Math.min(maxY, newTop))}px`;
 
        // Prevent scrolling while dragging
        e.preventDefault();
    });
 
    document.addEventListener('touchend', function(event) {
        if (isDragging && isMinimized) {
            isDragging = false;
 
            // Save the position (only top changes, left stays the same)
            bubblePosition = {
                top: mainContainer.style.top,
                left: bubblePosition.left // Keep the same left position
            };
            localStorage.setItem('audio_bubble_position', JSON.stringify(bubblePosition));
 
            // If touch distance was very small, treat as click
            const touchMoved = Math.abs(event.changedTouches[0].clientY - (parseInt(mainContainer.style.top) + dragOffsetY)) > 5;
 
            if (!touchMoved && (event.target === bubbleView || bubbleView.contains(event.target))) {
                toggleMinimized();
            }
        }
    });
 
    // Reset inactivity timer on user interaction with the control panel
    controlPanel.addEventListener('mouseenter', resetInactivityTimer);
    controlPanel.addEventListener('mousemove', resetInactivityTimer);
    controlPanel.addEventListener('click', resetInactivityTimer);
    controlPanel.addEventListener('touchstart', resetInactivityTimer);
 
    // Add click event for minimize button
    minimizeButton.addEventListener('click', toggleMinimized);
 
    // Method 1: Enhanced User Interaction Simulation
    function autoPlayWithInteraction() {
        if (!audioElement) return Promise.reject('No audio element found');
 
        return new Promise((resolve, reject) => {
            // Update UI to show we're using this method
            countdownDisplay.textContent = 'Method 1...';
 
            // Create and trigger various user interaction events
            const interactionEvents = ['touchend', 'click', 'keydown'];
            interactionEvents.forEach(eventType => {
                document.dispatchEvent(new Event(eventType, { bubbles: true }));
            });
 
            // Force load to ensure content is ready
            try {
                audioElement.load();
            } catch (e) {
                console.log('[Audio Controls] Load error:', e);
            }
 
            // Ensure volume is set to user's preferred level
            audioElement.volume = 1.0;
 
            // Ensure playback rate is set
            audioElement.playbackRate = playbackRate;
 
            // Try playback with interaction flag
            audioElement.play()
                .then(() => {
                    console.log('[Audio Controls] Method 1 successful');
                    resolve();
                })
                .catch(err => {
                    console.log('[Audio Controls] Method 1 failed:', err);
                    reject(err);
                });
        });
    }
 
    // Method 2: Progressive Media Loading Strategy
    function autoPlayWithProgressiveLoading() {
        if (!audioElement) return Promise.reject('No audio element found');
 
        return new Promise((resolve, reject) => {
            // Update UI
            countdownDisplay.textContent = 'Method 2...';
 
            // Store original values to restore later
            const originalVolume = audioElement.volume || 1.0;
            let volumeSetSuccessful = false;
            let loadTriggered = false;
            let canPlayHandlerSet = false;
 
            // Function to attempt playback once media can play
            const onCanPlay = () => {
                // Start with very low volume
                try {
                    audioElement.volume = 0.001;
                    volumeSetSuccessful = true;
                } catch (volErr) {
                    console.log('[Audio Controls] Could not set volume:', volErr);
                }
 
                // Clean up handler to avoid duplicate calls
                if (canPlayHandlerSet) {
                    audioElement.removeEventListener('canplay', onCanPlay);
                    canPlayHandlerSet = false;
                }
 
                // Attempt playback
                audioElement.play()
                    .then(() => {
                        if (volumeSetSuccessful) {
                            // Gradually restore volume
                            const volumeIncrease = setInterval(() => {
                                if (audioElement.volume < originalVolume) {
                                    audioElement.volume = Math.min(originalVolume, audioElement.volume + 0.1);
                                } else {
                                    clearInterval(volumeIncrease);
                                }
                            }, 200);
                        }
 
                        console.log('[Audio Controls] Method 2 successful');
                        resolve();
                    })
                    .catch(err => {
                        console.log('[Audio Controls] Method 2 failed:', err);
                        // Restore volume regardless
                        if (volumeSetSuccessful) {
                            audioElement.volume = originalVolume;
                        }
                        reject(err);
                    });
            };
 
            // Set up timeout to avoid hanging
            const timeout = setTimeout(() => {
                if (canPlayHandlerSet) {
                    audioElement.removeEventListener('canplay', onCanPlay);
                    canPlayHandlerSet = false;
                }
 
                // Make one final direct attempt before rejecting
                audioElement.play()
                    .then(resolve)
                    .catch(err => reject('Timed out waiting for canplay event: ' + err));
 
                // Restore volume
                if (volumeSetSuccessful) {
                    audioElement.volume = originalVolume;
                }
            }, 3000);
 
            try {
                // Listen for media ready state
                audioElement.addEventListener('canplay', onCanPlay);
                canPlayHandlerSet = true;
 
                // Force reload to trigger events
                try {
                    audioElement.load();
                    loadTriggered = true;
                    console.log('[Audio Controls] Load triggered for Method 2');
                } catch (e) {
                    console.log('[Audio Controls] Load failed:', e);
                }
 
                // If currentTime > 0, we're resuming, so try direct play as well
                if (audioElement.currentTime > 0) {
                    // Try direct playback too for quicker resume
                    audioElement.play()
                        .then(() => {
                            clearTimeout(timeout);
                            if (canPlayHandlerSet) {
                                audioElement.removeEventListener('canplay', onCanPlay);
                            }
                            resolve();
                        })
                        .catch(err => {
                            console.log('[Audio Controls] Direct resume attempt failed:', err);
                            // Continue waiting for canplay event
                        });
                }
            } catch (e) {
                clearTimeout(timeout);
                reject(e);
            }
        });
    }
 
    // Method 3: Audio Context API Fallback
    function autoPlayWithAudioContext() {
        if (!audioElement) return Promise.reject('No audio element found');
 
        return new Promise((resolve, reject) => {
            // Update UI
            countdownDisplay.textContent = 'Method 3...';
 
            try {
                // Create audio context if not already created
                if (!audioContext) {
                    const AudioContext = window.AudioContext || window.webkitAudioContext;
                    if (!AudioContext) {
                        return reject('AudioContext not supported');
                    }
 
                    audioContext = new AudioContext();
                }
 
                // Resume context if suspended
                if (audioContext.state === 'suspended') {
                    audioContext.resume();
                }
 
                // Create a silent buffer to unlock audio context
                const buffer = audioContext.createBuffer(1, 1, 22050);
                const source = audioContext.createBufferSource();
                source.buffer = buffer;
                source.connect(audioContext.destination);
                source.start(0);
 
                // Try using a different approach with media source
                try {
                    // Disconnect any existing connections
                    audioElement._mediaSource = audioElement._mediaSource || audioContext.createMediaElementSource(audioElement);
                    audioElement._mediaSource.connect(audioContext.destination);
                } catch (sourceErr) {
                    // If we already created a media source (which can only be done once),
                    // this will error but we can ignore it
                    console.log('[Audio Controls] Media source already created:', sourceErr);
                }
 
                // Ensure correct playback rate
                audioElement.playbackRate = playbackRate;
 
                // Try to play using standard method after unlocking
                audioElement.play()
                    .then(() => {
                        console.log('[Audio Controls] Method 3 successful');
                        resolve();
                    })
                    .catch(err => {
                        console.log('[Audio Controls] Method 3 failed:', err);
                        reject(err);
                    });
            } catch (e) {
                console.log('[Audio Controls] Audio context error:', e);
                reject(e);
            }
        });
    }
 
    // Function to attempt playback with all methods sequentially
    function attemptAutoPlay() {
        // Reset retry counter
        retryAttempts = 0;
 
        // Update UI to show we're attempting playback
        playPauseButton.innerHTML = '⏳';
        countdownDisplay.textContent = 'Starting...';
 
        // Special case for resuming from a non-zero position
        const isResuming = audioElement && audioElement.currentTime > 0 && !audioElement.ended;
 
        // Chain promises to try each method in sequence
        let playPromise;
 
        if (isResuming) {
            // If resuming, attempt direct playback first
            playPromise = new Promise((resolve, reject) => {
                console.log("[Audio Controls] Attempting direct resume from:", audioElement.currentTime);
                countdownDisplay.textContent = 'Resuming...';
 
                audioElement.play()
                    .then(() => {
                        console.log("[Audio Controls] Direct resume successful");
                        resolve();
                    })
                    .catch(err => {
                        console.log("[Audio Controls] Direct resume failed:", err);
                        reject(err);
                    });
            });
        } else if (USE_INTERACTION_METHOD) {
            playPromise = autoPlayWithInteraction();
        } else {
            playPromise = Promise.reject('Method 1 disabled');
        }
 
        // Try Method 2 if initial method fails
        playPromise
            .catch(err => {
                console.log('[Audio Controls] Trying next method...');
                if (USE_PROGRESSIVE_LOAD) {
                    return new Promise(resolve => {
                        // Add a short delay before trying the next method
                        setTimeout(() => {
                            autoPlayWithProgressiveLoading().then(resolve).catch(err => {
                                throw err;
                            });
                        }, 500);
                    });
                }
                return Promise.reject('Method 2 disabled');
            })
            // Try Method 3 if Method 2 fails
            .catch(err => {
                console.log('[Audio Controls] Trying final method...');
                if (USE_AUDIO_CONTEXT) {
                    return new Promise(resolve => {
                        // Add a short delay before trying the next method
                        setTimeout(() => {
                            autoPlayWithAudioContext().then(resolve).catch(err => {
                                throw err;
                            });
                        }, 500);
                    });
                }
                return Promise.reject('Method 3 disabled');
            })
            // Handle final success or failure
            .then(() => {
                // Success with any method
                updatePlayPauseButton();
                countdownDisplay.textContent = '';
                hasUserInteracted = true;
            })
            .catch(err => {
                console.log('[Audio Controls] All auto-play methods failed:', err);
                // All methods failed, show message and enable manual play
                countdownDisplay.textContent = 'Tap to play';
                playPauseButton.innerHTML = '▶️';
                updatePlayPauseButton();
            });
    }
 
    // Apply playback rate to all audio elements
    function applyPlaybackRateToAllAudio() {
        const now = Date.now();
        // Throttle frequent applications (but still allow force flag to override)
        if ((now - lastRateApplication) < 500) return;
 
        lastRateApplication = now;
        const allAudioElements = document.querySelectorAll(AUDIO_SELECTOR);
 
        if (allAudioElements.length > 0) {
            allAudioElements.forEach(audio => {
                if (audio.playbackRate !== playbackRate) {
                    audio.playbackRate = playbackRate;
                    console.log(`[Audio Controls] Applied rate ${playbackRate.toFixed(1)}x to audio element`);
                }
            });
 
            // If our main audio element isn't set yet, use the first one found
            if (!audioElement && allAudioElements.length > 0) {
                audioElement = allAudioElements[0];
                initializeAudio();
            }
        }
    }
 
    // Function to find audio element with immediate rate application
    function findAudioElement() {
        const allAudio = document.querySelectorAll(AUDIO_SELECTOR);
 
        if (allAudio.length > 0) {
            // Apply rate to all audio elements found
            applyPlaybackRateToAllAudio();
 
            // If we haven't set our main audio element yet, do so now
            if (!audioElement) {
                audioElement = allAudio[0];
                initializeAudio();
                // Make sure bubble icon gets updated immediately
                updateBubbleIcon();
                return true;
            } else {
                // Check if our tracked audio element has changed
                if (audioElement !== allAudio[0]) {
                    audioElement = allAudio[0];
                    initializeAudio();
                    updateBubbleIcon();
                }
            }
        }
 
        // Try again after a short delay if no audio found
        setTimeout(findAudioElement, 300);
        return false;
    }
 
    // Function to format time in MM:SS
    function formatTime(seconds) {
        const minutes = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${minutes}:${secs.toString().padStart(2, '0')}`;
    }
 
    // Function to run the countdown timer
    function startCountdown(seconds) {
        // Clear any existing countdown
        if (countdownTimer) {
            clearInterval(countdownTimer);
        }
 
        let remainingSeconds = seconds;
        updateCountdownDisplay(remainingSeconds);
 
        countdownTimer = setInterval(() => {
            remainingSeconds--;
            updateCountdownDisplay(remainingSeconds);
 
            if (remainingSeconds <= 0) {
                clearInterval(countdownTimer);
                countdownTimer = null;
 
                // Use new autoplay function when countdown reaches zero
                if (audioElement) {
                    attemptAutoPlay();
                }
            }
        }, 1000);
    }
 
    // Function to update countdown display
    function updateCountdownDisplay(seconds) {
        countdownDisplay.textContent = `Auto ${seconds}s`;
    }
 
    // Function to play audio with retry mechanism (legacy - kept for backward compatibility)
    function playAudioWithRetry() {
        attemptAutoPlay();
    }
 
    // Function to initialize audio controls
    function initializeAudio() {
        if (!audioElement) return;
 
        // Immediately set playback rate
        audioElement.playbackRate = playbackRate;
 
        // Set preload to auto for better playback
        audioElement.preload = 'auto';
 
        // Update UI based on current state
        updatePlayPauseButton();
 
        // Get duration when metadata is loaded and start countdown
        if (audioElement.readyState >= 1) {
            handleAudioLoaded();
        } else {
            audioElement.addEventListener('loadedmetadata', handleAudioLoaded);
        }
 
        // Add event listener to ensure playback rate is maintained
        audioElement.addEventListener('ratechange', function() {
            // If something else changed the rate, reset it to our value
            if (this.playbackRate !== playbackRate) {
                console.log("[Audio Controls] Rate changed externally, resetting to", playbackRate);
                this.playbackRate = playbackRate;
            }
        });
 
        // Add event listeners
        audioElement.addEventListener('play', function() {
            updatePlayPauseButton();
            // Update bubble icon specifically
            updateBubbleIcon();
        });
 
        audioElement.addEventListener('pause', function() {
            updatePlayPauseButton();
            // Update bubble icon specifically
            updateBubbleIcon();
        });
 
        audioElement.addEventListener('ended', function() {
            updatePlayPauseButton();
            // Update bubble icon specifically
            updateBubbleIcon();
        });
 
        // Initial update of bubble icon
        updateBubbleIcon();
    }
 
    // Function to handle audio loaded event
    function handleAudioLoaded() {
        if (!audioElement) return;
 
        // Ensure playback rate is set
        audioElement.playbackRate = playbackRate;
 
        // Update bubble icon based on current state
        updateBubbleIcon();
 
        // Start countdown for auto-play (5 seconds)
        const countdownSeconds = Math.floor(AUTO_PLAY_DELAY / 1000);
        startCountdown(countdownSeconds);
    }
 
    // Function to update the bubble icon based on audio state
    function updateBubbleIcon() {
        if (!audioElement) {
            bubbleIcon.innerHTML = '🔊'; // Default icon when no audio
            return;
        }
 
        if (audioElement.paused) {
            bubbleIcon.innerHTML = '▶️'; // Play icon when paused (showing what will happen on click)
        } else {
            bubbleIcon.innerHTML = '⏸️'; // Pause icon when playing (showing what will happen on click)
        }
    }
 
    // Function to update play/pause button state
    function updatePlayPauseButton() {
        if (!audioElement) return;
 
        // Ensure playback rate is correct
        if (audioElement.playbackRate !== playbackRate) {
            audioElement.playbackRate = playbackRate;
        }
 
        if (audioElement.paused) {
            playPauseButton.innerHTML = '▶️';
            playPauseButton.style.backgroundColor = '#4CAF50';
        } else {
            playPauseButton.innerHTML = '⏸️';
            playPauseButton.style.backgroundColor = '#F44336';
 
            // If playing, clear countdown
            if (countdownTimer) {
                clearInterval(countdownTimer);
                countdownTimer = null;
                countdownDisplay.textContent = '';
            }
        }
 
        // Update bubble icon
        updateBubbleIcon();
    }
 
    // Function to create a "resume" toast notification
    function showResumeToast(position) {
        // Create and style the toast
        const toast = document.createElement('div');
        toast.style.cssText = `
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 10px 15px;
            border-radius: 5px;
            font-size: 14px;
            z-index: 10000;
            opacity: 0;
            transition: opacity 0.3s ease;
        `;
 
        // Format the time nicely
        const formattedTime = formatTime(position);
        toast.textContent = `Resuming from ${formattedTime}`;
 
        // Add to document
        document.body.appendChild(toast);
 
        // Fade in
        setTimeout(() => {
            toast.style.opacity = '1';
        }, 10);
 
        // Remove after 2 seconds
        setTimeout(() => {
            toast.style.opacity = '0';
            setTimeout(() => {
                document.body.removeChild(toast);
            }, 300);
        }, 2000);
    }
 
    // Function to toggle play/pause with better resume handling
    function togglePlayPause() {
        if (!audioElement) return;
 
        // Reset inactivity timer on user interaction
        resetInactivityTimer();
 
        // Set flag for user interaction
        hasUserInteracted = true;
 
        // Ensure playback rate is set correctly
        if (audioElement.playbackRate !== playbackRate) {
            audioElement.playbackRate = playbackRate;
        }
 
        if (audioElement.paused) {
            // Check if currentTime is > 0, indicating playback was started before
            if (audioElement.currentTime > 0 && !audioElement.ended) {
                // Show resume toast if resuming from a significant position (more than 3 seconds in)
                if (audioElement.currentTime > 3) {
                    showResumeToast(audioElement.currentTime);
                }
 
                // Simply resume playback without using autoplay methods
                console.log("[Audio Controls] Resuming playback from position:", audioElement.currentTime);
 
                // Update UI immediately to provide feedback
                playPauseButton.innerHTML = '⏳';
                countdownDisplay.textContent = 'Resuming...';
 
                audioElement.play()
                    .then(() => {
                        updatePlayPauseButton();
                        countdownDisplay.textContent = '';
                    })
                    .catch(err => {
                        console.log("[Audio Controls] Resume failed, trying autoplay methods:", err);
                        attemptAutoPlay();
                    });
            } else {
                // If starting from beginning or after ended, try all methods
                attemptAutoPlay();
            }
        } else {
            audioElement.pause();
            updatePlayPauseButton();
        }
    }
 
    // Function to update playback speed
    function updatePlaybackSpeed(newRate) {
        // Reset inactivity timer on user interaction
        resetInactivityTimer();
 
        playbackRate = newRate;
 
        // Apply to all audio elements immediately
        applyPlaybackRateToAllAudio();
 
        // Update display
        speedDisplay.textContent = `${playbackRate.toFixed(1)}x`;
 
        // Save to localStorage
        localStorage.setItem('audio_playback_rate', playbackRate);
    }
 
    // Function to decrease playback speed
    function decreaseSpeed() {
        const newRate = Math.max(0.5, playbackRate - 0.1);
        updatePlaybackSpeed(newRate);
    }
 
    // Function to increase playback speed
    function increaseSpeed() {
        const newRate = Math.min(2.5, playbackRate + 0.1);
        updatePlaybackSpeed(newRate);
    }
 
    // Set up event listeners for buttons
    playPauseButton.addEventListener('click', togglePlayPause);
    speedDownButton.addEventListener('click', decreaseSpeed);
    speedUpButton.addEventListener('click', increaseSpeed);
 
    // Make bubble clickable with smart behavior
    bubbleView.addEventListener('click', function() {
        if (audioElement) {
            if (audioElement.paused) {
                // If audio exists and is paused, try to play it
                togglePlayPause();
 
                // After attempting to play, check if we're still paused (play failed)
                // and expand the controls in that case for more options
                setTimeout(() => {
                    if (audioElement.paused) {
                        toggleMinimized();
                    }
                }, 300);
            } else {
                // If we're playing, expand the panel
                toggleMinimized();
            }
        } else {
            // If no audio, just expand
            toggleMinimized();
        }
    });
 
    // Start periodic rate check interval and UI updates
    function startRateCheckInterval() {
        if (rateCheckInterval) {
            clearInterval(rateCheckInterval);
        }
 
        rateCheckInterval = setInterval(() => {
            applyPlaybackRateToAllAudio();
 
            // Update bubble icon even when minimized
            if (isMinimized && audioElement) {
                updateBubbleIcon();
            }
        }, RATE_CHECK_INTERVAL);
    }
 
    // Create an observer to watch for new audio elements
    const audioObserver = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                let foundNewAudio = false;
 
                mutation.addedNodes.forEach(function(node) {
                    if (node.nodeName === 'AUDIO' ||
                        (node.nodeType === 1 && node.querySelector(AUDIO_SELECTOR))) {
                        foundNewAudio = true;
                    }
                });
 
                if (foundNewAudio) {
                    // Immediately apply rate to any new audio elements
                    applyPlaybackRateToAllAudio();
 
                    // Reset audio element and reinitialize if needed
                    if (!audioElement) {
                        findAudioElement();
                    }
                }
            }
        });
    });
 
    // Function to immediately apply playback rate when the DOM is ready
    function onDOMReady() {
        console.log("[Audio Controls] DOM Content Loaded - initializing audio controls");
 
        // Try to unlock audio context early for iOS
        try {
            const AudioContext = window.AudioContext || window.webkitAudioContext;
            if (AudioContext) {
                audioContext = new AudioContext();
 
                // Create and play silent buffer
                const buffer = audioContext.createBuffer(1, 1, 22050);
                const source = audioContext.createBufferSource();
                source.buffer = buffer;
                source.connect(audioContext.destination);
                source.start(0);
 
                // Resume if needed
                if (audioContext.state === 'suspended') {
                    audioContext.resume();
                }
 
                console.log("[Audio Controls] AudioContext initialized:", audioContext.state);
            }
        } catch (e) {
            console.log("[Audio Controls] Early AudioContext initialization error:", e);
        }
 
        // Set up global event handlers for iOS audio unlocking
        const unlockEvents = ['touchstart', 'touchend', 'mousedown', 'keydown'];
        const unlockAudio = function() {
            if (audioContext && audioContext.state === 'suspended') {
                audioContext.resume();
            }
 
            // Remove these event listeners once used
            unlockEvents.forEach(event => {
                document.removeEventListener(event, unlockAudio);
            });
        };
 
        // Add unlock event listeners
        unlockEvents.forEach(event => {
            document.addEventListener(event, unlockAudio, false);
        });
 
        // Immediately try to find and configure audio
        applyPlaybackRateToAllAudio();
        findAudioElement();
 
        // Start the rate check interval
        startRateCheckInterval();
 
        // Start observing the document
        audioObserver.observe(document.body, { childList: true, subtree: true });
    }
 
    // Initialize as soon as the DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', onDOMReady);
    } else {
        // DOM already loaded, initialize immediately
        onDOMReady();
    }
 
    // Double-check when page is fully loaded
    window.addEventListener('load', function() {
        console.log("[Audio Controls] Window loaded - ensuring audio playback rate");
        applyPlaybackRateToAllAudio();
    });
 
    // Initialize the view state
    updateViewState();
})();