Widget:NarrateButton: Difference between revisions
(VSCode edit) |
(VSCode edit) |
||
| (8 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<div id="narrateControl" class="d-inline-block cursor-pointer audio-control line10 p-1 offwhite-bg"> | <div id="narrateControl" class="d-inline-block cursor-pointer audio-control line10 p-1 offwhite-bg border" style=" | ||
<i class="audio-icon fa- | border-color: var(--tws-text-green); | ||
color: var(--tws-text-green);"> | |||
<i class="audio-icon fa-duotone fa-play fa-sm fa-fw"></i> | |||
<i class="audio-rewind-icon fa-duotone fa-arrow-rotate-left fa-sm fa-fw" style="display: none;"></i> | |||
<span>Listen to this page</span> | <span>Listen to this page</span> | ||
<i class="audio-download fa-duotone fa-download fa-sm fa-fw"></i> | |||
<audio src="<!--{$src|default:''}-->" preload="none"></audio> | <audio src="<!--{$src|default:''}-->" preload="none"></audio> | ||
</div><script> | </div><script> | ||
| Line 7: | Line 11: | ||
var control = document.getElementById('narrateControl'); | var control = document.getElementById('narrateControl'); | ||
if (!control) return; | if (!control) return; | ||
var audio = control.querySelector('audio'); | var audio = control.querySelector('audio'); | ||
var icon | var icon = control.querySelector('.audio-icon'); | ||
var rewind = control.querySelector('.audio-rewind-icon'); | |||
var download = control.querySelector('.audio-download'); | |||
function showRewind() { rewind.style.display = ''; } | |||
function hideRewind() { rewind.style.display = 'none'; } | |||
control.addEventListener('click', function () { | control.addEventListener('click', function () { | ||
// Pause any other audio on the page, but leave their position alone. | |||
var allAudios = document.querySelectorAll('audio'); | var allAudios = document.querySelectorAll('audio'); | ||
var allIcons = document.querySelectorAll('.audio-icon'); | var allIcons = document.querySelectorAll('.audio-icon'); | ||
Array.prototype.forEach.call(allAudios, function (other) { | Array.prototype.forEach.call(allAudios, function (other) { | ||
if (other !== audio && !other.paused) { other.pause() | if (other !== audio && !other.paused) { other.pause(); } | ||
}); | }); | ||
Array.prototype.forEach.call(allIcons, function (otherIcon) { | Array.prototype.forEach.call(allIcons, function (otherIcon) { | ||
| Line 24: | Line 34: | ||
icon.classList.remove('fa-play'); | icon.classList.remove('fa-play'); | ||
icon.classList.add('fa-pause'); | icon.classList.add('fa-pause'); | ||
showRewind(); | |||
} else { | } else { | ||
audio.pause(); | audio.pause(); | ||
icon.classList.add('fa-play'); | icon.classList.add('fa-play'); | ||
icon.classList.remove('fa-pause'); | 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'); | |||
} | |||
}); | |||
download.addEventListener('click', function (e) { | |||
e.stopPropagation(); | |||
var src = audio.getAttribute('src'); | |||
if (!src) return; | |||
var link = document.createElement('a'); | |||
link.href = src; | |||
link.download = ''; | |||
document.body.appendChild(link); | |||
link.click(); | |||
document.body.removeChild(link); | |||
}); | }); | ||
| Line 35: | Line 72: | ||
icon.classList.add('fa-play'); | icon.classList.add('fa-play'); | ||
icon.classList.remove('fa-pause'); | icon.classList.remove('fa-pause'); | ||
hideRewind(); | |||
}); | }); | ||
}()); | }()); | ||
</script> | </script> | ||
Latest revision as of 10:00, 26 June 2026
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'); var download = control.querySelector('.audio-download');
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'); } });
download.addEventListener('click', function (e) { e.stopPropagation(); var src = audio.getAttribute('src'); if (!src) return; var link = document.createElement('a'); link.href = src; link.download = ; document.body.appendChild(link); link.click(); document.body.removeChild(link); });
audio.addEventListener('ended', function () { icon.classList.add('fa-play'); icon.classList.remove('fa-pause'); hideRewind(); }); }()); </script>
