multiple audio html : auto stop other when current is playing

Question

I have 2 audio instances on a single page. Handling the audio to play and pause isn't an issue. The issue is when audio is playing and I click play on another, I can't get the other audio instance to stop playing with icon modify

Any help would be appreciated :) thanks

$('section .play').click(function(){
    var $this = $(this);

    // starting audio
    var audioID = "sound" + $(this).attr('id');

    $this.toggleClass('active');
    if($this.hasClass('active')){
        $("#" + audioID).trigger('play');       

    } else {
        $("#" + audioID).trigger('pause');
      
    }
});

section {
    display: block;
    margin-bottom: 30px;
    padding: 0 20px;
    text-align: center;
    width: 200px;
    height: 200px;
    position: relative;
}
 
 section .btn {
    background: #ccc;
border: 0 none;
cursor: pointer;
display: block;
height: 60px;
line-height: 60px;
position: absolute;
width: 200px;
z-index: 100;
bottom: 0;
text-align: center;
 }
  section .btn:after {
    content: "play";
    
 }

section .btn.active:after {
    content: "pause";
    
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section><img src="https://unsplash.it/g/300?image=29" width="200" height="200" />
<p class="play btn" id="7"></p>
<p><audio id="sound7">
<source src="https://room1015.com/img/cms/MP3/Hanging-out-in-room-1015.mp3" type="audio/mpeg" />
</audio></p>
</section>
<section><img src="https://unsplash.it/g/300?image=29" width="200" height="200" />
<p class="play btn" id="6"></p>
<p><audio id="sound6">
    <source src="https://room1015.com/img/cms/MP3/HOLLYROSE.mp3" type="audio/mpeg" />
</audio></p>
</section>

dippas dippas · Accepted Answer · 2020-12-05T01:35:42

I would loop through each .play button and detect when the audio is paused (or stopped), if so, then pause/stop every possible audio being played, then start playing the audio matching the pressed play button.

With this you won't need IDs, so your HTML will be less cluttered.

This solution will work for any amount of audios in the page

N.B - I added also a Pure JS solution.

//pure JS Version

const playButton = document.querySelectorAll('section .play')

playButton.forEach(el => {
  const currentAudio = el.nextElementSibling.querySelector('audio')

  el.addEventListener('click', e => {
    if (currentAudio.paused) {
      document.querySelectorAll('audio').forEach(el => el.pause())
      currentAudio.play()
      playButton.forEach(el => el.classList.remove('active'))
      e.currentTarget.classList.add('active')
    } else {
      e.currentTarget.classList.remove('active')
      currentAudio.pause()
    }
  })
})

//jQuery Version
//const playButton = $('section .play')

//playButton.each((_, el) => {
//  const currentAudio = $(el).next().find('audio')[0]

//  $(el).on('click', e => {
//    if (currentAudio.paused) {
//    $('audio').each((_, el) => el.pause())
//      currentAudio.play()
//      playButton.removeClass('active')
//      $(e.currentTarget).addClass('active')
//    }
//    else {
//        e.currentTarget.classList.remove('active')
//        currentAudioJs.pause()
//     }
//  })
//})

section {
  display: block;
  margin-bottom: 30px;
  padding: 0 20px;
  text-align: center;
  width: 200px;
  height: 200px;
  position: relative;
}

section .btn {
  background: #ccc;
  border: 0 none;
  cursor: pointer;
  display: block;
  height: 60px;
  line-height: 60px;
  position: absolute;
  width: 200px;
  z-index: 100;
  bottom: 0;
  text-align: center;
}

section .btn:after {
  content: "play";
}

section .btn.active:after {
  content: "pause";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <img src="https://unsplash.it/g/300?image=29" width="200" height="200" />
  <p class="play btn"></p>
  <p>
    <audio>
      <source src="https://room1015.com/img/cms/MP3/Hanging-out-in-room-1015.mp3" type="audio/mpeg" />
    </audio>
  </p>
</section>
<section>
  <img src="https://unsplash.it/g/300?image=29" width="200" height="200" />
  <p class="play btn"></p>
  <p>
    <audio>
      <source src="https://room1015.com/img/cms/MP3/HOLLYROSE.mp3" type="audio/mpeg" />
</audio>
  </p>
</section>

multiple audio html : auto stop other when current is playing

1 Answers