HTML5 Audio stop function

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?

Instead of stop() you could try with:

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

This should have the desired effect.

first you have to set an id for your audio element

in your js :

var ply = document.getElementById('player');

var oldSrc = ply.src;// just to remember the old source

ply.src = "";// to stop the player you have to replace the source with nothing

Related