I have multiple default HTML5 audio players on a single HTML page. I'm trying to make it so when you play one file and then play the other. The first file will pause.

I started and created a function as follows:

allAudioEls = $('audio');

    function pauseAllAudio() {
       allAudioEls.each(function() {
          var a = $(this).get(0);
          a.pause();
       });
    }

whats the next step?

I have multiple default HTML5 audio players on a single HTML page. I'm trying to make it so when you play one file and then play the other. The first file will pause.

I started and created a function as follows:

allAudioEls = $('audio');

    function pauseAllAudio() {
       allAudioEls.each(function() {
          var a = $(this).get(0);
          a.pause();
       });
    }

whats the next step?

• javascript
• jquery
• html
• audio

• Hello, try to using $(this)[0].pause(); instead of $(this).get(0); a.pause(); – Nicolai Commented Apr 30, 2014 at 20:13
• @Nicolai I have to call the function when the audio players play button and pause button is clicked. I dont know how to bind the play or pause event to call that function and play the individual audio. – Dondada Commented Apr 30, 2014 at 20:24
• Check this and this – Nicolai Commented Apr 30, 2014 at 20:27
• the first link will show you how to add listener to "play" event. So you can just instead of "foo" place you pauseAllAudio function – Nicolai Commented Apr 30, 2014 at 20:28
• @Nicolai I'm at the point where if I press play everything pauses, and that individual audio wont play. I need to run the function that stops all audio then start playing the audio that the play button is clicked. This is my code: allAudioEls = $('audio'); $('audio').bind('play', function(e) { allAudioEls.each(function() { var a = $(this).get(0); a.pause(); }); }); – Dondada Commented May 1, 2014 at 15:07

3 Answers 3

I Think this is the best Answer for you : Stop other Audio ...

You need to add the following Script only with JQuery.

JavaScript:

$("audio").bind("play",function (){
  $("audio").not(this).each(function (index, audio) {
    audio.pause();
  });
});
//Must be added at the bottom in HTML CODE

I think this is what you're looking for: JsFiddle link

Html:

<audio id="audio" controls>
</audio>
<audio id="audio1" controls>    
</audio>

Javascript:

$("audio").each(function(){
  $(this).bind("play",stopAll);
});

function stopAll(e){
    var currentElementId=$(e.currentTarget).attr("id");
    $("audio").each(function(){
        var $this=$(this);
        var elementId=$this.attr("id");
        if(elementId!=currentElementId){
            $this[0].pause();
        }
    });
}

thats easy with jquery. below is an example of both audio and video

$("audio").on("play", function() {
    var id = $(this).attr('id');

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

$("video").on("play", function() {
    var id = $(this).attr('id');

    $("video").not(this).each(function(index, video) {
        video.pause();
    });
});