HTML5 Audio Looping
To add some more advice combining the suggestions of @kingjeffrey and @CMS: You can use loop
where it is available and fall back on kingjeffrey's event handler when it isn't. There's a good reason why you want to use loop
and not write your own event handler: As discussed in the Mozilla bug report, while loop
currently doesn't loop seamlessly (without a gap) in any browser I know of, it's certainly possible and likely to become standard in the future. Your own event handler will never be seamless in any browser (since it has to pump around through the JavaScript event loop). Therefore, it's best to use loop
where possible instead of writing your own event. As CMS pointed out in a comment on Anurag's answer, you can detect support for loop
by querying the loop
variable -- if it is supported it will be a boolean (false), otherwise it will be undefined, as it currently is in Firefox.
Putting these together:
myAudio = new Audio('someSound.ogg');
if (typeof myAudio.loop == 'boolean')
{
myAudio.loop = true;
}
else
{
myAudio.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
}
myAudio.play();
While loop
is specified, it is not implemented in any browser I am aware of Firefox [thanks Anurag for pointing this out]. Here is an alternate way of looping that should work in HTML5 capable browsers:
var myAudio = new Audio('someSound.ogg');
myAudio.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
myAudio.play();
Your code works for me on Chrome (5.0.375), and Safari (5.0). Doesn't loop on Firefox (3.6).
See example.
var song = new Audio("file");
song.loop = true;
document.body.appendChild(song);