Widget:NarrateButton

Listen to this page <audio src="" preload="none"></audio>

<script>

(function () { var control = document.getElementById('narrateControl'); if (!control) return; var audio = control.querySelector('audio'); var icon = control.querySelector('.audio-icon'); var rewind = control.querySelector('.audio-rewind-icon');

function showRewind() { rewind.style.display = ; } function hideRewind() { rewind.style.display = 'none'; }

control.addEventListener('click', function () { // Pause any other audio on the page, but leave their position alone. var allAudios = document.querySelectorAll('audio'); var allIcons = document.querySelectorAll('.audio-icon'); Array.prototype.forEach.call(allAudios, function (other) { if (other !== audio && !other.paused) { other.pause(); } }); Array.prototype.forEach.call(allIcons, function (otherIcon) { if (otherIcon !== icon) { otherIcon.classList.add('fa-play'); otherIcon.classList.remove('fa-pause'); } });

if (audio.paused) { audio.play().catch(function (err) { console.error('Error playing audio:', err); }); icon.classList.remove('fa-play'); icon.classList.add('fa-pause'); showRewind(); } else { audio.pause(); icon.classList.add('fa-play'); icon.classList.remove('fa-pause'); // Keep rewind visible while paused mid-track so the user can choose to restart. } });

rewind.addEventListener('click', function (e) { e.stopPropagation(); audio.currentTime = 0; hideRewind(); // If we were playing, keep playing from the top; if paused, stay paused at 0. if (!audio.paused) { icon.classList.remove('fa-play'); icon.classList.add('fa-pause'); } else { icon.classList.add('fa-play'); icon.classList.remove('fa-pause'); } });

audio.addEventListener('ended', function () { icon.classList.add('fa-play'); icon.classList.remove('fa-pause'); hideRewind(); }); }()); </script>