2

tengo un reproductor con 3 canciones. cada canción tiene su icono de "play" y en otro div "reproductorcontroles" tengo un icono de "play" desde donde quiero pausar o reproducir la canción que este sonando.

Este div "reproductorcontroles" esta oculto y al reproducir una canción se muestra. por eso ya hay una canción sonando y puedo pararla pero quiero que al pulsar otra vez en el icono se vuelva a reproducir. pero como le indico a este div que canción se estaba reproduciendo para que ejecute el .play(), es decir como puedo saber el data-audio que se estaba reproduciendo????

document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
        if(audios[i] != e.target){
            audios[i].pause();
        }
    }
}, true);



	$(document).on('click', '.play', function()
	{
	 
		var whichAudio = $('#audio' + $(this).data('audio'));
		document.getElementById("reproductorcontroles").style.height = "45px";
		whichAudio[0].paused
		? whichAudio[0].play() 
		: whichAudio[0].pause();  



	});



//aqui ejecuto pausar desde el div reproductorcontroles

$(document).on('click', '.playlista', function(e)
{
    var audios = document.getElementsByTagName('audio');
     for(var i = 0, len = audios.length; i < len;i++)
     {
        if(audios[i] != e.target)
        {
        	audios[i].pause();
        	
        }

		 
           
    }
});  
#reproductorcontroles
{
	width: 100%;
	margin:  0 auto;
	height: 0px;
	background-color: #658955 ;
	position: fixed;
	transition: height .4s;
	bottom: 0;
	left:0;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="play" data-audio="1">cancion 1</li>

  <li  class="play" data-audio="2">cancion 2</li>
 
  <li  class="play" data-audio="3">cancion 3</li>
</ul>

<audio id="audio1">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3">
</audio>
<audio id="audio2">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3">
</audio>
<audio id="audio3">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3">
</audio>
  
             <div id="reproductorcontroles">
                      
                                   
                                    <ul>
                                        <li class="playlista"> play/pause
                                        
                                        </li>
                                     </ul>
                               </div>
                              
                           
</body>
</html>

2
  • no se entiende bien lo que quieres... En cuando suene la canción 1 quieres que se muestre en playlista la canción 1? Commented el 14 oct. 2016 a las 10:10
  • No. en playlista lo que quiero es pausar / reproducir la cancion que este sonando Commented el 14 oct. 2016 a las 10:11

1 respuesta 1

1

En los comentarios te he puesto los cambios:

document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
        if(audios[i] != e.target){
            audios[i].pause();
        }
    }
}, true);

// Pon la variable whichAudio "global"
var whichAudio;

$(document).on('click', '.play', function() {
	 
	whichAudio = $('#audio' + $(this).data('audio'));
	document.getElementById("reproductorcontroles").style.height = "45px";
	whichAudio[0].paused
	? whichAudio[0].play() 
	: whichAudio[0].pause();
});


// Aqui simplemente pausa/reproduce la cancion elegida
$(document).on('click', '.playlista', function(e) {
	whichAudio[0].paused
	? whichAudio[0].play() 
	: whichAudio[0].pause();
});
#reproductorcontroles
{
	width: 100%;
	margin:  0 auto;
	height: 0px;
	background-color: #658955 ;
	position: fixed;
	transition: height .4s;
	bottom: 0;
	left:0;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="play" data-audio="1">cancion 1</li>
  <li  class="play" data-audio="2">cancion 2</li> 
  <li  class="play" data-audio="3">cancion 3</li>
</ul>

<audio id="audio1">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3">
</audio>
<audio id="audio2">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3">
</audio>
<audio id="audio3">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3">
</audio>
  
<div id="reproductorcontroles">
  <ul>
    <li class="playlista"> play/pause</li>
  </ul>
</div>                              
                           
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.