Widget:AudioVerse: Difference between revisions

Latest revision as of 11:10, 1 October 2026

var audioControl = document.getElementById('audioControl'), audio = audioControl.querySelector('audio'), icon = audioControl.querySelector('.audio-icon');

audioControl.addEventListener("click", function() { // Stop all other playing audio elements first var allAudios = document.querySelectorAll('audio'); var allIcons = document.querySelectorAll('.audio-icon'); Array.prototype.forEach.call(allAudios, function(otherAudio) { if (otherAudio !== audio && !otherAudio.paused) { otherAudio.pause(); otherAudio.currentTime = 0; } }); Array.prototype.forEach.call(allIcons, function(otherIcon) { if (otherIcon !== icon && !otherIcon.paused) { otherIcon.classList.add('fa-play'); otherIcon.classList.remove('fa-pause'); } }); // Handle the clicked audio element if (audio.paused) { audio.play().catch(function(error) { console.error("Error playing audio:", error); }); 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>

@@ Line 1: / Line 1: @@
-<audio id="audioVerse" preload='none'>
+<audio id="audioVerse<!--{$id|default:''}-->" preload="none" src="<!--{$src|default:''}-->"></audio><script>
-	<source src='<!--{$src|default:''}-->' type='audio/mp3' />
-</audio>
-<a href="#" id="audioControl" class="text-60 offwhite-bg rounded tsdwiki-pop-off px-2 py-1 d-flex align-items-center">CHANT <i id="audioIcon" class="fa-sharp-duotone fa-solid fa-volume-high fa-sm ml-1"></i></a>
-<script>
-	var audioControl = document.getElementById("audioControl"),
+var audioControl<!--{$id|default:''}--> = document.getElementById('audioControl<!--{$id|default:''}-->'),
-		audio = document.getElementById("audioVerse");
+	audio<!--{$id|default:''}--> = audioControl<!--{$id|default:''}-->.querySelector('audio'),
-		icon = document.getElementById("audioIcon");
+	icon<!--{$id|default:''}--> = audioControl<!--{$id|default:''}-->.querySelector('.audio-icon');
-	audioControl.addEventListener("click", (event) => {
+audioControl<!--{$id|default:''}-->.addEventListener("click", function() {
-		if (audio.paused) {
+	// Stop all other playing audio elements first
-			audio.play();
+	var allAudios = document.querySelectorAll('audio');
-		} else {
+	var allIcons = document.querySelectorAll('.audio-icon');
-			audio.pause();
+	Array.prototype.forEach.call(allAudios, function(otherAudio) {
-			audio.currentTime = 0
+		if (otherAudio !== audio<!--{$id|default:''}--> && !otherAudio.paused) {
+			otherAudio.pause();
+			otherAudio.currentTime = 0;
 		}
-		icon.classList.toggle("fa-play");
-		icon.classList.toggle("fa-pause");
 	});
+	Array.prototype.forEach.call(allIcons, function(otherIcon) {
+		if (otherIcon !== icon<!--{$id|default:''}--> && !otherIcon.paused) {
+			otherIcon.classList.add('fa-play');
+			otherIcon.classList.remove('fa-pause');
+		}
+	});
+	// Handle the clicked audio element
+	if (audio<!--{$id|default:''}-->.paused) {
+		audio<!--{$id|default:''}-->.play().catch(function(error) {
+			console.error("Error playing audio:", error);
+		});
+		icon<!--{$id|default:''}-->.classList.remove('fa-play');
+		icon<!--{$id|default:''}-->.classList.add('fa-pause');
+	} else {
+		audio<!--{$id|default:''}-->.pause();
+		audio<!--{$id|default:''}-->.currentTime = 0;
+		icon<!--{$id|default:''}-->.classList.add('fa-play');
+		icon<!--{$id|default:''}-->.classList.remove('fa-pause');
+	}
+});
+audio<!--{$id|default:''}-->.addEventListener('ended', function() {
+	icon<!--{$id|default:''}-->.classList.add('fa-play');
+	icon<!--{$id|default:''}-->.classList.remove('fa-pause');
+});
 </script>