Блог

У меня есть несколько кнопок воспроизведения звука. Я хотел бы приостановить все остальные, когда я нажимаю на один из них. это работает нормально, но дополнительно я хотел бы приостановить текущий и запустить другой напрямую.

 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>  

 $(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, все они заменены на $, что является тем же самым.

После этого я создал документ события на () вместо .player click(). Это позволит в будущем, когда вы захотите добавлять больше вещей динамически.

После этого я собрал всех проигрывателей в let, и с каждым циклом вы можете что-то делать с каждым из них. В этом случае я проверяю, совпадает ли идентификатор данных с идентификатором выбранного проигрывателя. Если значение false, приостановите его и установите time равным 0, если true, воспроизведите звук.

Если вы хотите, вы можете добавить в 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 else можно использовать, когда вы нажимаете на проигрыватель, который уже воспроизводится, для нажатия на другой проигрыватель после паузы вам просто нужна часть if.

Редактировать: я видел, что в html вы использовали тег a, это не требуется при работе с аудио и видео, его <source src="location of file">

Правка 2: я попытался с помощью фрагмента кода заставить его работать или, по крайней мере, без ошибок. Звук не будет воспроизводиться из-за localhost.