[SOLUCIONADO] ¿Como se puede parar un reproductor al pinchar en otro?

[rompeguesos]

Hola amigos.. tengo una dudilla.. Tengo un código php que muestra una lista de canciones con datos de la bd.. mi problema es que es un bucle que me muestra varias canciones y si le vas dando play a todo.. todo va sonando.. ¿Sabéis como puedo hacer para que se pare el reproductor anterior al pinchar en otro play?

Os adjunto el código actual:

Código PHP:

  <?php  
  $numcolumnas = 3; 
  //echo $array["id"]; 
  $consulta = mysql_query("SELECT * FROM locutores as loc LEFT JOIN asignaciones as asi ON loc.id = asi.id_locucion WHERE asi.id_usuario = '".$array["id"]."' AND loc.genero='Masculino'"); 
  $total_resultados = mysql_num_rows($consulta); 
   if ($total_resultados>0) { 
     echo "<div>Hay $total_resultados elementos</div>"; 
     $i = 1; 
     while($fila = mysql_fetch_array($consulta)){ 
       $resto = ($i % $numcolumnas);  
       if($resto == 1){ /*si es el primer elemento creamos una nueva fila*/  
         echo "<div class='row'>"; 
     } 
     echo "<div class='col-lg-4'> 
     <div class='item-casting'> 
     <div class='small-track-container'> 
     <div class='div-track-actions'> 
     <div class='row row-no-padding'> 
     <div class='col-sm-4 col-xs-4 nopadding'> 
 
                                            <div class='circle-track'>"; 
 
                                                echo "<img onclick=\"mostrar(this,'reproductor".$fila['id']."'); return false\" class='img-track' alt='img-listen' src='http://...../wp-content/themes/track15/images/listen-track.png'> 
 
                                            </div> 
 
                                        </div> 
 
                                        <div class='col-sm-8 col-xs-8 nopadding'> 
 
                                            <div class='div-track-data'> 
 
                                                <p class='track-title'>Locutor: ".$fila['codigo']."</p> 
 
                                                <p class='track-client'>Idiomas: ".$fila['idioma']."</p> 
 
                                                <p class='track-category'>Género: ".$fila['genero']."</p> 
 
                                                <div class='text-right track-download-container'> 
 
                                                    <a href='http://...../clientes/".$fila['urlaudio']."' title='Descargar track'><img class='track-download' alt='img-download' src='http://...../wp-content/themes/track15/images/download-track.png'></a> 
 
                                                </div> 
 
                                            </div> 
 
                                        </div> 
     </div> 
     <audio id='reproductor".$fila['id']."' controls style='display:none'> 
<source src='http://..../clientes/".$fila['urlaudio']."' type='audio/mp3' /> 
</audio> 
     </div> 
     </div> 
     </div> 
     </div>"; 
     /*mostramos el valor del campo especificado*/  
    if($resto == 0){ 
      /*cerramos la fila*/  
      echo "</div>";  
    } 
   $i++;  
 } 
 
 if($resto != 0){ 
  /*Si en la última fila sobran columnas, creamos celdas vacías*/ 
   for ($j = 0; $j < ($numcolumnas - $resto); $j++){ 
     //echo "<td></td>";  
    } 
   echo "</div>"; 
  }  
}else{  
  echo "<div>0 elementos encontrados</div> "; 
 } ?>   

[Triby]

Eso no lo puedes hacer en PHP, porque se ejecuta en el servidor y el reproductor en el navegador; seguramente lo lograrás con Javascript; muevo tu tema al foro adecuado.

[rompeguesos]

Gracias Triby!

Alguien en este foro que sepa como puedo hacerlo?

[nilburcion]

Si, lo que puedes hacer es que cuando se pulse play en alguno, parar todos los demás <audios> que estén en la página, aquí tienes el código:

Código Javascript:

function paraTodosExcepto(ele){
var audios = document.getElementsByTagName("audio");
for(var i = 0; i < audios.length; i++){
   if(audios[i]!=ele){
      audios[i].pause();
   }
}
}
 

Y luego en cada reproductor de <audio> tienes que añadir el "listener" onplay con una llamada a la función paraTodosExcepto así:

Código HTML:

<audio ... onplay="paraTodosExcepto(this)">
...
</audio>
 

[rompeguesos]

Funciona perfecto! Muchíiisimas gracias!