Estoy creando una plantilla para un sitio web de HUGO con una página de lista con tarjetas. Tengo archivos de audio del contenido de cada tarjeta. Aquí están los elementos html:
<audio class="podcast__audio" src="{{ $podcast.RelPermalink }}"></audio>Tengo un botón para cada tarjeta para reproducir audio:
<button class="podcast__player_button"> <img class="podcast__player_play" src="/images/podcast/play.png"> </button>En Javascript reproduzco audio con esta función:
const podcastAudio = document.querySelector('.podcast__audio'); function toggleAudio () { if (podcastAudio.paused) { podcastAudio.play(); } else { podcastAudio.pause(); } }Muestro 4 tarjetas en la página de lista y cada tarjeta tiene un archivo de audio diferente para reproducir.
Tengo un bucle for para el detector de eventos en los botones:
const podcastPlayerButton = document.querySelectorAll('.podcast__player_button'); for (let i = 0; i < podcastPlayerButton.length; i++) { podcastPlayerButton[i].addEventListener('click', toggleAudio); } Funciona bien, pero alterna solo el primer archivo de audio de la página (lo que tiene sentido), pero quiero que reproduzca el archivo de audio vinculado a cada tarjeta. El primer botón podcast__player_button debe reproducir el primer archivo de podcast__audio , el segundo botón debe reproducir el segundo archivo de audio y así sucesivamente.
¿Supongo que necesito consultarSelectorAll archivos de audio e querySelectorAll ? ¿Cómo ejecutar la función toggleAudio() en los archivos de audio correctos?
Ok, porque los botones y los archivos de audio tienen el mismo índice, este código funciona:
for (let i = 0; i < podcastPlayerButton.length; i++) { podcastPlayerButton[i].addEventListener('click', function () { if (podcastAudio[i].paused) { podcastAudio[i].play(); } else { podcastAudio[i].pause(); } }) };