Home / Questions / 27791
Accepted
Rafael Hernández
Asked: 2020-10-15 02:04:23 +0800 CST 2020-10-15 02:04:23 +0800 CST

pause or play the song that is playing from another button with javascript

  • 772

I have a player with 3 songs. each song has its "play" icon and in another div "controlplayer" I have a "play" icon from where I want to pause or play the song that is playing.

This "controlplayer" div is hidden and when playing a song it is shown. That's why there is already a song playing and I can stop it but I want it to play again when I press the icon again. but how do I indicate to this div which song was being played so that it executes the .play(), that is, how can I know the data-audio that was being played????

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>

javascript

1 Answers

  1. Best Answer

    In the comments I have put the changes:

    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>

    • 1