Widget:AudioVerse: Difference between revisions
((by SublimeText.Mediawiker)) |
((by SublimeText.Mediawiker)) |
||
| Line 1: | Line 1: | ||
<span id="audioControl<!--{$id|default:''}-->" class="ml-2 audio-control verse-page-toggle active text-70 px-1 py-0">chant <i class="fa-sharp-duotone fa-solid fa-play fa-sm ml-1"></i><audio id="audioVerse<!--{$id|default:''}-->" src="<!--{$src|default:''}-->"></audio></span><script> | <span id="audioControl<!--{$id|default:''}-->" class="ml-2 audio-control verse-page-toggle active text-70 px-1 py-0">chant <i class="fa-sharp-duotone fa-solid fa-play fa-sm ml-1"></i><audio id="audioVerse<!--{$id|default:''}-->" src="<!--{$src|default:''}-->"></audio></span><script> | ||
var audioControl = document.getElementById('audioControl<!--{$id|default:''}-->'), | var audioControl<!--{$id|default:''}--> = document.getElementById('audioControl<!--{$id|default:''}-->'), | ||
audio = audioControl.querySelector('audio'), | audio = audioControl<!--{$id|default:''}-->.querySelector('audio'), | ||
icon = audioControl.querySelector('i'); | icon = audioControl<!--{$id|default:''}-->.querySelector('i'); | ||
audioControl.addEventListener("click", function() { | audioControl<!--{$id|default:''}-->.addEventListener("click", function() { | ||
// Stop all other playing audio elements first | // Stop all other playing audio elements first | ||
var allAudios = document.querySelectorAll('audio'); | var allAudios = document.querySelectorAll('audio'); | ||
Revision as of 18:32, 29 April 2025
chant <audio id="audioVerse" src=""></audio><script>
var audioControl = document.getElementById('audioControl'), audio = audioControl.querySelector('audio'), icon = audioControl.querySelector('i');
audioControl.addEventListener("click", function() { // Stop all other playing audio elements first var allAudios = document.querySelectorAll('audio'); Array.prototype.forEach.call(allAudios, function(otherAudio) { if (otherAudio !== audio && !otherAudio.paused) { otherAudio.pause(); otherAudio.currentTime = 0; } }); // 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'); } });
</script>
