var pause = document.querySelector(".pause1");
var audio = document.querySelector(".audio1");
function togglePlay() {
if (audio.paused) {
audio.play();
pause.innerHTML = "🔊";
} else {
audio.pause();
pause.innerHTML = "🔇";
pause.style.color = " #a80000";
}
}<li class="mp3-views">
<div class="views-field mp3-play">
<div class="pause1" onclick="togglePlay()">▶</div>
<div class="player">
<audio class="audio1" src="assets/images/audio.mp3" type="audio" loop=""></audio>
</div>
</div>
</li>I want to run this code in loop because Play button is repeated in 'li' and I am not sure how to do it
One solution is to place the event handler on the container and then used closest to get the parent li and the audio. This would allow you to add and remove as many audio clips as required and without having to add a click handler to each one.
players.addEventListener("click", function(event) {
let li = event.target.closest(".mp3-views");
if (li) {
let pause = li.querySelector(".pause1");
let audio = li.querySelector(".audio1");
if (audio.paused) {
audio.play();
pause.innerHTML = "🔊";
} else {
audio.pause();
pause.innerHTML = "🔇";
pause.style.color = " #a80000";
}
}
});<ul id="players">
<li class="mp3-views">
<div class="views-field mp3-play">
<div class="pause1">▶</div>
<div class="player">
<audio class="audio1" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mp3" loop=""></audio>
</div>
</div>
</li>
<li class="mp3-views">
<div class="views-field mp3-play">
<div class="pause1">▶</div>
<div class="player">
<audio class="audio1" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" type="audio" loop=""></audio>
</div>
</div>
</li>
<li class="mp3-views">
<div class="views-field mp3-play">
<div class="pause1">▶</div>
<div class="player">
<audio class="audio1" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3" type="audio" loop=""></audio>
</div>
</div>
</li>
</div>