Tutorials

Persistant Audio Settings

HTML

CSS

/* Audio Controls - nirixan.neocities.org */
document.addEventListener('DOMContentLoaded', function () {
    var audio = document.getElementById('computerAmbience');
    var toggle = document.getElementById('audioPauseButton');
    var volume = document.getElementById('audioVolume');

// Load Saved Volume
    var savedVolume = localStorage.getItem('audioVolume');
    if (savedVolume !== null && audio) {
        audio.volume = savedVolume;
        volume.value = savedVolume;
    } else if (audio) {
        audio.volume = 0.5; // Default volume
        volume.value = 0.5;
    }

// Load saved play state
    var savedState = localStorage.getItem('audioPaused');

if (savedState === 'false' && audio) {
        // User left it playing = auto-play
        audio.play().then(() => {
            toggle.textContent = '⏸';
        }).catch(() => {
            // Blocked by browser = show correct button
            toggle.textContent = '▶';
        });
    } else if (savedState === null && audio) {
        // First visit = try auto-play
        audio.play().then(() => {
            toggle.textContent = '⏸';
            localStorage.setItem('audioPaused', 'false');
        }).catch(() => {
            toggle.textContent = '▶';
            localStorage.setItem('audioPaused', 'true');
        });
    } else {
        // User had it paused = don't auto-play
        toggle.textContent = '▶';
    }

// Toggle Play/Pause
    toggle.addEventListener('click', function () {
        if (audio.paused) {
            audio.play().then(() => {
                toggle.textContent = '⏸';
                localStorage.setItem('audioPaused', 'false');
            }).catch(() => {
                // Play might be blocked
            });
        } else {
            audio.pause();
            toggle.textContent = '▶';
            localStorage.setItem('audioPaused', 'true');
        }
    });

// Volume Change
    volume.addEventListener('input', function () {
        if (audio) {
            audio.volume = this.value;
            localStorage.setItem('audioVolume', this.value);
        }
    });

// Syncs Button
    audio.addEventListener('play', function () {
        toggle.textContent = '⏸';
    });
    audio.addEventListener('pause', function () {
        toggle.textContent = '▶';
    });
});

Connecting...

Pages

README.md

Tutorials

Persistant Audio Settings

About the Site

Contact

About the Author