the problem seems simple but I can't find a solution. I have multiple audio element in a html file. the first mission was to pause other when click on new one. so that was achieved by this code:
var current_active_audio_element = "";
document.addEventListener('play', function (e) {
var audios = document.getElementsByTagName('audio');
for (var i = 0, len = audios.length; i < len; i++) {
if (audios[i] != e.target) {
current_active_audio_element = e.target;
audios[i].pause();
}
}
}, true);and the code above works fine. the next objective was to make a alert or console output when one audio element was paused. I just want only clicked element not the ones which paused programmatically in the if loop in snippet above Some thing like this:
document.addEventListener('pause', function (e) {
var audios = document.getElementsByTagName('audio');
//console.log("CLICKED ITEM");
}, true);my html code is simple and it's like this:
<h3>Khaled</h3>
<audio controls id="Khaled" ">
<source src="Khaled.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<h3>Radio 2</h3>
<audio controls id="Radio2">
<source src="Radio2.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>