Control dinámico de audio HTML5 con JavaScript

Question

Tengo una galería de géneros con 10 o más miniaturas que representan una canción. Para controlar la reproducción de cada uno, he configurado un botón de reproducción para que se desvanezca a través de jQuery. Después de investigar en el Centro de desarrollo de Apple, encontré algunos JavaScript nativos para controlar el audio. Funciona muy bien, pero está escrito para el control de un objeto a la vez. Lo que me gustaría hacer es volver a escribirlo como una función que controla dinámicamente la reproducción/pausa de la miniatura que está seleccionando.

A continuación se muestra el código que encontré .. funciona, pero sería un código innecesario escribirlo 10 veces.

Gracias por su ayuda y consejo, siempre!

HTML:

<div class="thumbnail" id="paparazzixxx"> 
     <a href="javascript:playPause();"> 
      <img id="play" src="../images/icons/35.png" /> 
     </a> 
     <audio id="paparazzi"> 
      <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" /> 
      <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" /> 
      Your browser does not support HTML5 audio. 
     </audio> 
    </div> 

JavaScript:

<script type="text/javascript"> 
     function playPause() { 
     var song = document.getElementsByTagName('audio')[0]; 
     if (song.paused) 
      song.play(); 
     else 
      song.pause(); 
     } 
</script> 

Answer 1

jQuery es impresionante para este tipo de cosas. Le da la capacidad de manipular elementos fácilmente en función de su relación con otros elementos en el árbol DOM. En su ejemplo, desea poder hacer que los elementos <a> solo afecten a los elementos <audio> que están justo al lado de ellos cuando se hace clic en ellos.

El problema con su código Javascript actual es que en realidad solo está captando solo el primer elemento de audio en toda la página.

Así es como puede cambiar su código para admitir un número ilimitado de <a> & <audio> pares.

1. Añadir una clase a la <a> etiqueta ('reproducción' en mi ejemplo)
2. Reemplazar el atributo href con un '#'
3. A continuación, utilice jQuery para conectar un controlador al evento click de elementos con esa clase.

HTML

<div class="thumbnail" id="paparazzixxx"> 
    <a class="playback" href="#"> 
     <img id="play" src="../images/icons/35.png" /> 
    </a> 
    <audio id="paparazzi"> 
     <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" /> 
     <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" /> 
     Your browser does not support HTML5 audio. 
    </audio> 
</div> 

Javascript

<script type="text/javascript"> 
    $(function() { 
    $(".playback").click(function(e) { 
     e.preventDefault(); 

     // This next line will get the audio element 
     // that is adjacent to the link that was clicked. 
     var song = $(this).next('audio').get(0); 
     if (song.paused) 
     song.play(); 
     else 
     song.pause(); 
    }); 
    }); 
</script> 

Answer 2

Javascript/Jquery to control HTML5 audio elements - comprobar este enlace - explica How to handle/control the HTML5 audio elements?. ¡Puede ayudarte!