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>Quiero ejecutar este código en bucle porque el botón Reproducir se repite en 'li' y no estoy seguro de cómo hacerlo.
Una solución es colocar el controlador de eventos en el contenedor y luego usarlo más cerca para obtener el li principal y el audio. Esto le permitiría agregar y eliminar tantos clips de audio como sea necesario y sin tener que agregar un controlador de clic a cada uno.
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>