Question

我有多个音频按钮。我想在单击其中一个时暂停其他所有程序。多数民众赞成在正常工作，但我还想暂停当前的并直接启动另一个。

var playing = false;

jQuery('.player').click(function() {
  jQuery('.player').removeClass('playing');
    jQuery(this).addClass('playing');

    jQuery('.playing').each(function(){
      var audio = jQuery(this).find('audio')[0]; 

      if (playing !== true) {
        audio.play();
      } else {
        audio.pause();
        audio.currentTime = 0;
      }

      playing = !playing
      jQuery(this).siblings().find('audio').each(function(index, elem){
          elem.pause();
          elem.currentTime = 0;
      });
            
  });   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="player" >
  <h2>Fractions du Silence</h2>
  <audio class="sound">
    <source>
      <a href="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Fractions-du-silence-Bertrand-Dubedout.mp3">Fractions du silence</a>
    </source>
  </audio> 
    </div>
  <div class="player">
  <h2>Merlin, 1. Movement</h2>
  <audio class="sound">
    <source><a href="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Merlin-1.-Movement-Andrew-Thomas.mp3">Merlin, 1. Movement (Andrew Thomas)</a>
    </source>                 
  </audio>
</div>

Answer 1

$(document).on('click', '.player', function() {
  let players = $(document).find('.player');
  $.each(players, function(i, val) {
    if ($(this).data('id') !== $(val).data('id')) {
      if ($(val).data('playing')) {
        $(val).data('playing', false);
        let audio = $(val).find('audio').get(0);
        audio.pause;
        audio.currentTime = 0;
      }
    } else {
      if ($(val).data('playing')) {
        $(val).data('playing', false);
        let audio = $(val).find('audio').get(0);
        audio.pause;
        audio.currentTime = 0;
      } else {
        $(val).data('playing', true);
        let audio = $(val).find('audio').get(0);
        audio.play;
      }
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="player" data-playing="false" data-id="1">
  <h2>Fractions du Silence</h2>
  <audio class="sound" preload="auto">
<source src="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Fractions-du-silence-Bertrand-Dubedout.mp3">Fractions du silence</source></audio>
</div>
<div class="player" data-playing="false" data-id="2">
  <h2>Merlin, 1. Movement</h2>
  <audio class="sound" preload="auto">
<source src="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Merlin-1.-Movement-Andrew-Thomas.mp3">Merlin, 1. Movement (Andrew Thomas)</source></audio>
</div>

我实际上是自己做的，但是用视频而不是音频。原理是一样的。

<div class="player" ><h2>Fractions du Silence</h2>
<audio class="sound">
<source><a href="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Fractions-du-silence-Bertrand-Dubedout.mp3">Fractions du silence</a></source>
</audio> 
</div>
<div class="player">
<h2>Merlin, 1. Movement</h2>
<audio class="sound">
<source><a href="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Merlin-1.-Movement-Andrew-Thomas.mp3">Merlin, 1. Movement (Andrew Thomas)</a></source>                  </audio>
</div>

上面是您所拥有的代码，在下面，我将写出我的代码。

<div class="player" data-playing="false" data-id="1">
<h2>Fractions du Silence</h2>
<audio class="sound">
<source src="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Fractions-du-silence-Bertrand-Dubedout.mp3">Fractions du silence</source>
</audio> 
</div>
<div class="player" data-playing="false" data-id="2">
<h2>Merlin, 1. Movement</h2>
<audio class="sound">
<source src="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Merlin-1.-Movement-Andrew-Thomas.mp3">Merlin, 1. Movement (Andrew Thomas)</source>                  </audio>
</div>

我已将数据属性应用于html，因此它们将是独立的实体，而无需依赖js中的全局变量，在js中您可以看到我这样做的原因。

var playing = false;

jQuery('.player').click(function() {
  jQuery('.player').removeClass('playing');
    jQuery(this).addClass('playing');

    jQuery('.playing').each(function(){
      var audio = jQuery(this).find('audio')[0]; 

      if (playing !== true) {
        audio.play();
      } else {
        audio.pause();
        audio.currentTime = 0;
      }

      playing = !playing
      jQuery(this).siblings().find('audio').each(function(index, elem){
          elem.pause();
          elem.currentTime = 0;
      });
            
  });   
});

我已经写下来，使用数据属性，您将不需要使用全局变量。

$(document).on('click', '.player', function(){
let players = $(document).find('.player');
$.each(players, function(i, val){
if($(this).data('id')!== $(val).data('id')){
$(val).data('playing', false);
let audio = $(val).find('audio').get(0);
audio.pause;
audio.currentTime=0;
} else {
$(val).data('playing', true);
let audio = $(val).find('audio').get(0);
audio.play;
}
})
})

就像我已经完成了您的html代码一样。我对js进行了一些更改。首先，我完全放弃了您进行的jQuery调用，所有这些都被相同的$代替。

在此之后，我将事件文档设置为on（）而不是.player click（）。这样将来就可以动态添加更多东西。

在那之后，我将所有玩家聚集在一起，通过一个循环，您可以对每个玩家进行操作。在这种情况下，我检查data-id是否等于所点击播放器的data-id。如果为假，则将其暂停并将时间设置为0；如果为假，则播放音频。

如果愿意，您可以在if内进行添加，以通过放置放置来检查玩家是否在玩，您可以放置以下if和ifelse

if($(val).data('playing'))
{
$(val).data('playing', false);
let audio = $(val).find('audio').get(0);
audio.pause;
audio.currentTime=0;
} else {
$(val).data('playing', true);
let audio = $(val).find('audio').get(0);
audio.play;
}

如果您单击已经在播放的播放器，则可以使用if，如果暂停后单击其他播放器，则只需要if部分。

编辑：我在html中看到您使用了一个标签，在使用音频和视频及其<source src="location of file">

时不需要

Edit2：我尝试使用代码段使其正常工作，或者至少没有错误。由于本地主机，声音不会播放。

jQuery的乘音频按钮停止兄弟姐妹播放++直接播放另一个音频

1 个答案: