https://asherlevitas.com Asher Levitas Mon, 21 Dec 2020 09:27:31 +0000 https://asherlevitas.com en https://asherlevitas.com/Home Mon, 21 Dec 2020 09:27:31 +0000 Asher Levitas https://asherlevitas.com/Home #audioToggle { background: none; border: none; padding: 0; cursor: pointer; color: #000; opacity: 0.7; transition: opacity .18s ease; /* --- Centre of the screen --- */ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Make sure icon centres inside button */ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; z-index: 9999; /* stays on top */ } #audioToggle:hover { opacity: 1; } #myAudio { display: none; } document.addEventListener('DOMContentLoaded', function () { const audio = document.getElementById('myAudio'); const btn = document.getElementById('audioToggle'); const playIcon = document.getElementById('playIcon'); const stopIcon = document.getElementById('stopIcon'); // Ensure loop is on audio.loop = true; function showPlay() { playIcon.style.display = 'block'; stopIcon.style.display = 'none'; btn.setAttribute('aria-pressed', 'false'); } function showStop() { playIcon.style.display = 'none'; stopIcon.style.display = 'block'; btn.setAttribute('aria-pressed', 'true'); } // Initialize visual state based on audio state if (audio.paused) showPlay(); else showStop(); btn.addEventListener('click', async () => { try { if (audio.paused) { // Play may return a promise that rejects if browser blocks autoplay — catch it await audio.play(); showStop(); } else { audio.pause(); audio.currentTime = 0; showPlay(); } } catch (err) { // If play() fails (autoplay/security), fall back to showing play icon and log reason. console.warn('Audio play() prevented:', err); showPlay(); } }); });