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>
playlista
la canción 1?