#Nr. 123 - Ein Hörspiel nach dem anderen

Halten Sie automatisch alle anderen Audioplayer an, wenn ein Benutzer auf die Wiedergabe eines Audioplayers klickt.

UX Accessibility

Video Tutorial

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

17 lines

Paste this into Webflow

<!-- 💙 MEMBERSCRIPT #123 💙 - ONE AUDIO AT A TIME -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const pauseOthers = current => 
      document.querySelectorAll('audio, video').forEach(el => el !== current && !el.paused && el.pause());
  
    const addPlayListener = el => el.addEventListener('play', e => pauseOthers(e.target));
  
    new MutationObserver(mutations => 
      mutations.forEach(m => m.addedNodes.forEach(n => 
        (n.nodeName === 'AUDIO' || n.nodeName === 'VIDEO') && addPlayListener(n)
      ))
    ).observe(document.body, { childList: true, subtree: true });
  
    document.querySelectorAll('audio, video').forEach(addPlayListener);
  });
</script>