Tengo una lista de canciones. cada una con un icono para reproducir, quiero que cuando se pulse en una canción el icono cambie (icono pausa) y que cuando se pulse en otra canción la anterior su icono cambie. pero también cuando pulse en una canción y pulse en la misma canción el icono también cambie, es decir que solo halla un icono de pausa en la canción que este sonando.
<li class="lireproductor">
<img id="idplay1" class="play" data-audio="1" data-img="1" src="images/play.png">Cuando amanece
</li>
<li class="lireproductor">
<img id="idplay2" class="play" data-audio="2" data-img="2" src="images/play.png">animal
</li>
<li class="lireproductor">
<img id="idplay3" class="play" data-audio="3" data-img="3" src="images/play.png">animal
</li>
document.addEventListener('play', function(d)
{
//poner en play.png tdoas las canciones menos la que dispare la funcion
// var iconos = document.getElementsByTagName('idplay');
icono = $('#idplay' + $(this).data('img'));
icono.attr('src','images/pause.png');
for(var i = 0, len = icono.length; i < len;i++)
{
if(icono[i] != d.target)
{
icono[i].attr('src','images/play.png');
}
}
}, true);
www.jamondemono.com/mono en la seccion discografía en el disco la desvirtualización de las ideas tengo el reproductor.
me funciona lo que quiero pero si pulso en una canción, el icono cambia a pausa y luego pulso en otra canción el icono de la anterior vuelve a play pero si pulsas dos veces sobre la misma cancion no se cambia el icono. (este es el problema)
he conseguido el cambio de icono con este código:
function iconopause1()
{
$("#idplay1").attr('src','images/pause.png');
$("#idplay2").attr('src','images/play.png');
$("#idplay3").attr('src','images/play.png');
$("#idplay4").attr('src','images/play.png');
$("#idplay5").attr('src','images/play.png');
$("#idplay6").attr('src','images/play.png');
$("#idplay7").attr('src','images/play.png');
}
pero es repetir mucho código y no me soluciona bien el problema.