Widget:AudioVerse: Difference between revisions
((by SublimeText.Mediawiker)) |
(Audio players: preload=none, so a slow commons response no longer holds the page load) |
||
| (39 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<audio id="audioVerse | <audio id="audioVerse<!--{$id|default:''}-->" preload="none" src="<!--{$src|default:''}-->"></audio><script> | ||
<script> | |||
var audioControl = document.getElementById( | var audioControl<!--{$id|default:''}--> = document.getElementById('audioControl<!--{$id|default:''}-->'), | ||
audio = | audio<!--{$id|default:''}--> = audioControl<!--{$id|default:''}-->.querySelector('audio'), | ||
icon = | icon<!--{$id|default:''}--> = audioControl<!--{$id|default:''}-->.querySelector('.audio-icon'); | ||
audioControl.addEventListener("click", () => { | audioControl<!--{$id|default:''}-->.addEventListener("click", function() { | ||
if (audio.paused) { | // Stop all other playing audio elements first | ||
audio.play(); | var allAudios = document.querySelectorAll('audio'); | ||
var allIcons = document.querySelectorAll('.audio-icon'); | |||
Array.prototype.forEach.call(allAudios, function(otherAudio) { | |||
if (otherAudio !== audio<!--{$id|default:''}--> && !otherAudio.paused) { | |||
otherAudio.pause(); | |||
otherAudio.currentTime = 0; | |||
} | |||
}); | |||
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 { | } else { | ||
audio.pause(); | audio<!--{$id|default:''}-->.pause(); | ||
audio.currentTime = 0; | 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> | </script> | ||
Latest revision as of 11:10, 1 October 2026
<audio id="audioVerse" preload="none" 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>
