|
|
| Line 1: |
Line 1: |
| <includeonly><div id="narrateControl" class="d-inline-block cursor-pointer audio-control "> | | <includeonly>{{#widget:NarrateButton|src={{filepath:{{PAGENAME:{{{ 1 | }}} }} }}}}</includeonly> |
| <i class="audio-icon fa-sharp fa-solid fa-play fa-fw mr-1"></i>
| |
| <span>Listen to this page</span>
| |
| <audio src="{{filepath:{{PAGENAME:{{{ 1 | }}} }} }}" preload="none"></audio>
| |
| </div>
| |
| | |
| <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></includeonly>
| |
