HTML5 Audio Player - Пауза нескольких аудио элементов, кроме текущей итерации - PullRequest
Новая
       10

HTML5 Audio Player - Пауза нескольких аудио элементов, кроме текущей итерации

1 голос
/ 10 марта 2020

У меня есть рабочий массив аудиоплееров, но проблема в том, что этот код позволяет пользователю воспроизводить несколько треков одновременно. Я бы хотел приостановить все аудиоплееры, за исключением выбранного аудиоплеера, когда нажата кнопка «воспроизведение». Это было выполнено, но теперь я не могу понять, как изменить изображения для затронутой кнопки с пауза, чтобы играть. Синтаксис {{l oop .index}} - это ветка, и каждому экземпляру # play-btn id и # pause-btn id присваивается уникальное имя ex: # play-btn1 - на случай, если кому-то интересно. 

 <script>
 $(document).ready(function(){
     let play = "#play-btn" + {{ loop.index }};
     let pause = "#pause-btn" + {{ loop.index }};

 $(play).click(function(){
     $(this).hide();
     $(pause).attr( "style", "display: inline-block;" );
      });

 $(pause).click(function(){
     $(this).hide();
     $(play).show();
     }); 
 });

window.addEventListener("play", function(evt) {
    if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target){
        window.$_currentlyPlaying.pause();
             } 
        window.$_currentlyPlaying = evt.target;
        }, true);

</script>

<div class="flex justify-center">
  <div class="my-auto">
    <audio id="player{{ loop.index }}" src="{{ block.audio.one.url }}" style="width: 0px;"></audio>
     <a class="play-btn audio-btn" id="play-btn{{ loop.index }}" onclick="document.getElementById('player'+ {{ loop.index }}).play()"></a>
     <a class="pause-btn audio-btn" id="pause-btn{{ loop.index }}" onclick="document.getElementById('player' + {{ loop.index }}).pause()"></a>
                </div>
...