html5 play audio loop 4x then stop

Question

Hi I need to loop audio file a certain number of times ie 4, I have the sound file looping correctly, code below. ? how to stop loop after 4x, many thanks P

Answer 1

I managed to do it like this:

 $('#play_audio').click(function () {                     
            var times = 4;
            var loop = setInterval(repeat, 500);

        function repeat() {
            times--;
            if (times === 0) {
                clearInterval(loop);
            }

            var audio = document.createElement("audio");
            audio.src = "files/windows%20default.mp3";

            audio.play();
        }

        repeat();           
    });      
}); 

Answer 2

Throw in a simple if statement with a counter like so:

UPDATED:

$('#play_audio').click(function () {
            var audio = document.createElement("audio");
            audio.src = "files/windows%20default.mp3";

            audio.addEventListener('ended', function () {

                var repeat = 0;

                // Wait 500 milliseconds before next loop  
                setTimeout(function () {
                      if repeat < 3 {
                           var repeat = repeat + 1;
                           audio.play();
                      }
                      else {
                           return done;                
                      }
                }, 500);

            }, false);

      audio.play();
});

SECOND UPDATE:

$('#play_audio').click(function () {
        var audio = document.createElement("audio");
        audio.src = "files/windows%20default.mp3";        

        delay(500).audio.play();
        delay(1000).audio.play();
        delay(1500).audio.play();
        delay(2000).audio.play();
});

It's not scalable from a programming standpoint, but if you're trying to just solve this one problem this one time it's a viable workaround.

I'm sure if I had more time and we could do a chat perhaps I could get the loop code working, but try this and let me know if it does the trick.

Answer 3

Perhaps a better way to do it is to keep your HTML the same. Just target it with a specific id.

<audio id="loop-limited" controls>
    <source src="music.ogg" type="audio/ogg">
    <source src="music.mp3" type="audio/mpeg">
</audio> 

Here's the JavaScript:

// Audio Loop Limit
var loopLimit = 4;
var loopCounter = 0;
document.getElementById('loop-limited').addEventListener('ended', function(){
    if (loopCounter < loopLimit){
        this.currentTime = 0;
        this.play();
        loopCounter++;
    }
}, false);   

Answer 4

I recently had a similar situation and I solved it with a code like this:

var ringsToPlay = 4;
var sound = new Audio('http://www.oneoakway.com/_inactive/oldfiles/chimebang.mp3');
var currentRing = 0;

function doIt() {
    sound.volume = .4;
    sound.play();
    currentRing = 1;
    sound.addEventListener('ended', ringMore, false);
}

function ringMore() {
    if(currentRing == ringsToPlay) {
        sound.removeEventListener('ended', ringMore, false);
    } else {
        sound.play();
        currentRing++;
    }
}

Note that I only code for the latest browsers. I have no idea if this will work with older browsers, probably not. I only test my code in FF, Chrome and IE, latest versions, Windows 7.

Fidlle: http://jsfiddle.net/fidnut/2oL5fsxz/1/

Answer 5

Just scare them when they load your page... But, Thanks I was looking for a way to do this,

$(document).ready(function () {
    var times = Math.floor((Math.random() * 5) + 1);
    var loop = setInterval(repeat, 500);

    function repeat() {
        times--;
        if (times === 0) {
            clearInterval(loop);
        }

        var audio = document.createElement("audio");
        audio.src = "http://static1.grsites.com/archive/sounds/birds/birds001.wav";

        audio.play();
    }

    repeat();
});

https://jsfiddle.net/qmcw0cqq/