SO53822939

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <video src='https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4' loop controls autoplay width='49%'></video>
  <section>
    <audio src='https://od.lk/s/NzlfOTEyMzgyNF8/jerky.mp3' controls></audio>
    <audio src='https://od.lk/s/NzlfOTEwMzM5OV8/righteous.mp3' controls></audio>
    <audio src='https://od.lk/s/NzlfOTEyMzg0OV8/misty_forest.mp3' controls></audio>
  </section>
  
  <script src="script.js"></script>
</body>

</html>

// Collect all <audio> tags into a NodeList
var clips = document.querySelectorAll('audio');

/* 
Loop through the NodeList and register each <audio>
to the playing event.
When triggered, callback function mep() is called.
*/
for (let i = 0; i < clips.length; i++) {
  clips[i].addEventListener('playing', mep);
}

function mep(e) {
  /* 
  e.target is the <audio> that started playing
  On each loop check if <audio> is NOT e.target
  and then pause and load it.
  */
  for (let i = 0; i < clips.length; i++) {
    if (clips[i] !== e.target) {
      clips[i].pause();
      clips[i].load();
    }
  }
}

video, section {
  float: left;
  width: 49%;
}