Play one HTML audio element at a time

Little Modification to LostInComputer's Answer

In Your HTML Write:

<audio controls onplay="pauseOthers(this);" >
                    <source src="SourcePath">

                </audio>

In Js Write:

function pauseOthers(ele) {
                $("audio").not(ele).each(function (index, audio) {
                    audio.pause();
                });
            }

Vanilla JS solution

Here's a solution that doesn't require jQuery.

function onlyPlayOneIn(container) {
  container.addEventListener("play", function(event) {
  audio_elements = container.getElementsByTagName("audio")
    for(i=0; i < audio_elements.length; i++) {
      audio_element = audio_elements[i];
      if (audio_element !== event.target) {
        audio_element.pause();
      }
    }
  }, true);
}

document.addEventListener("DOMContentLoaded", function() {
  onlyPlayOneIn(document.body);
});

Some things to note:

• Because this listens for events on a parent element, not on the audio elements themselves, they can be added or removed after the page is loaded and it will still work.
• It watches for the play event in the capture phase because play events don't bubble.
• More media events are described here on MDN.
• Listening for "DOMContentLoaded" should work for most browers.

$(function(){
    $("audio").on("play", function() {
        $("audio").not(this).each(function(index, audio) {
            audio.pause();
        });
    });
});

See sample at JSFiddle