Template:Narrate: Difference between revisions

@@ Line 1: / Line 1: @@
-<includeonly>
+<includeonly><div id="narrateControl" class="cursor-pointer audio-control d-inline-flex align-items-center px-3 py-2 rounded offwhite-bg shadow-sm mb-3">
+	<i class="audio-icon fa-sharp fa-solid fa-play fa-fw mr-2"></i>
+	<span class="text-90">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'); }
+		});
-<audio src="{{filepath:{{PAGENAME:{{{ 1 | }}} }} }}"></audio>
+		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');
+		}
+	});
-<i class="fa-sharp-duotone fa-solid fa-play-pause"></i> Listen to this page
+	audio.addEventListener('ended', function () {
+		icon.classList.add('fa-play');
-</includeonly>
+		icon.classList.remove('fa-pause');
+	});
+}());
+</script></includeonly>

Template:Narrate: Difference between revisions

Revision as of 17:09, 14 May 2026