Widget:AudioVerse: Difference between revisions
((by SublimeText.Mediawiker)) |
((by SublimeText.Mediawiker)) |
||
| Line 25: | Line 25: | ||
audio<!--{$id|default:''}-->.play().catch(function(error) { | audio<!--{$id|default:''}-->.play().catch(function(error) { | ||
console.error("Error playing audio:", error); | console.error("Error playing audio:", error); | ||
}); | }); | ||
icon<!--{$id|default:''}-->.classList.remove('fa-play'); | icon<!--{$id|default:''}-->.classList.remove('fa-play'); | ||
Revision as of 18:41, 29 April 2025
chant <audio id="audioVerse" src=""></audio><script>
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>
