HTML5 Audio stop function

html html5-audio

Alok Jain · Feb 12, 2013 · Viewed 244.3k times · Source

I am playing a small audio clip on click of each link in my navigation

HTML Code:

<audio tabindex="0" id="beep-one" controls preload="auto" >
    <source src="audio/Output 1-2.mp3">
    <source src="audio/Output 1-2.ogg">
</audio>

JS code:

$('#links a').click(function(e) {
    e.preventDefault();
    var beepOne = $("#beep-one")[0];
    beepOne.play();
});

It's working fine so far.

Issue is when a sound clip is already running and i click on any link nothing happens.

I tried to stop the already playing sound on click of link, but there is no direct event for that in HTML5's Audio API

I tried following code but it's not working

$.each($('audio'), function () {
    $(this).stop();
});

Any suggestions please?

Answer

Instead of stop() you could try with:

sound.pause();
sound.currentTime = 0;

This should have the desired effect.