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

使用 javascript 暂停或播放从另一个按钮播放的歌曲

  • 772

我有一个播放器有 3 首歌曲。每首歌都有它的“播放”图标，在另一个 div 的“controlplayer”中，我有一个“播放”图标，我想暂停或播放正在播放的歌曲。

这个“controlplayer”div 是隐藏的，在播放歌曲时会显示出来。这就是为什么已经有一首歌在播放，我可以停止它，但我希望它在我再次按下图标时再次播放。但是我如何向这个div指示正在播放哪首歌以便它执行.play（），也就是说，我怎么知道正在播放的数据音频？？？？

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

    在评论中，我提出了更改：

    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