HTML5 audio start over

Question

Having

var audio = new Audio("click.ogg")

I play the click sound when needed by

audio.play()

However, sometimes user is so fast that a browser does not play the audio at all (probably when still playing a previous play request). Is this issue related to preload?

How can I force a browser to stop playing and start over? There is no stop, just pause in HTML5 audio component, correct? What workaround can be used here?

---

Update - Additional note:

I have multiple checkbox-like div elements with a touchend event. When such event is triggered, the elements visually change, a sound is played and an internal variable is set accordingly. If user tap on these elements slowly, everything works nicely. If tap fast, the sound is often completely skipped...

Answer 1

You can try this code:

audio.currentTime = 0;
audio.play();

It looks like this is the simplest solution.

Answer 2

This is the code I've been using and it's working for me:

            if(audioSupport.duration > 0 && !audioSupport.paused){

                //already playing
                audioSupport.pause();
                audioSupport.currentTime = 0;
                audioSupport.play();

            }else{

                //not playing

                audioSupport.play();    

            }

Answer 3

I noticed that on Firefox, playing a sound again and again really fast (like a short ticking sound) will skip beats often. The best solution I got was to simply call cloneNode and play each sound that way. Its not perfect (compared to Chrome where it sounds flawless):

var audio = document.getElementById('myaudio');
setInterval(function() {
    audio.cloneNode().play();
}, 100);

Answer 4

The only way i found how to play a short sound very quickly (so quick that the 2nd sound starts before the first ends) is to actually load 5 or 10 and if you have to play again but are already playing, just go to the next, which is not playing:

    var soundEls = [];//load 10 audios instead of 1
    for(var i=0;i<10;i++){
        var soundEl = document.createElement('audio');
        soundEl.src = url;
        soundEl.preload = 'auto';
        $(this._soundEl).append(soundEl);
        soundEls.push(soundEl);
    }

    var soundElIndex = 0;

    return {play:function(){
        var soundEl = soundEls[soundElIndex];

        if(soundEl.duration > 0 && !soundEl.paused){

            //already playing, switch to next soundEl
            soundElIndex++;
            if(!soundEls[soundElIndex]) soundElIndex=0;
            soundEls[soundElIndex].play();

        }else{

            //not playing
            soundEl.play();    

        }

    }};

Result of this is you can actually play the same sound over itself.

Probably not the right way to do it though.