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">


In Js Write:

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

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 !== {
  }, true);

document.addEventListener("DOMContentLoaded", function() {

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.

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

See sample at JSFiddle