Widget:NarrateButton: Difference between revisions
(VSCode edit) |
(VSCode edit) |
||
| Line 1: | Line 1: | ||
<div id="narrateControl" class="d-inline-block cursor-pointer audio-control line10"> | <div id="narrateControl" class="d-inline-block cursor-pointer audio-control line10 p-1 offwhite-bg"> | ||
<i class="audio-icon fa-sharp fa-solid fa-play fa-sm fa-fw | <i class="audio-icon fa-sharp fa-solid fa-play fa-sm fa-fw"></i> | ||
<span>Listen to this page</span> | <span>Listen to this page</span> | ||
<audio src="<!--{$src|default:''}-->" preload="none"></audio> | <audio src="<!--{$src|default:''}-->" preload="none"></audio> | ||
Revision as of 17:23, 14 May 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');
control.addEventListener('click', function () { 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(); other.currentTime = 0; } }); 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'); } else { audio.pause(); audio.currentTime = 0; icon.classList.add('fa-play'); icon.classList.remove('fa-pause'); } });
audio.addEventListener('ended', function () { icon.classList.add('fa-play'); icon.classList.remove('fa-pause'); }); }()); </script>
