Audiocopy HTML5

Question

I recently played with HTML5 audio, and although I can get it to play the sound it will ever play. No matter what I try (setting properties, event handlers, etc.), I cannot get it to loop.

Here is the base code I'm using:

//myAudio is declared at a global scope, so it doesn't get garbage collected. myAudio = new Audio('someSound.ogg'); myAudio.loop = true; myAudio.play(); 

I am testing with Chrome (6.0.466.0 dev) and Firefox (4 beta 1), both of which seem to gladly ignore my loop requests. Any ideas?

UPDATE : the loop property is now supported in all major browsers.

Answer 1

While loop is specified, it is not implemented in in any browser that I know of Firefox [thanks Anurag for pointing this out]. Here's an alternative loop method that should work in browsers that support HTML5:

 myAudio = new Audio('someSound.ogg'); myAudio.addEventListener('ended', function() { this.currentTime = 0; this.play(); }, false); myAudio.play(); 

Answer 2

To add a few more tips combining the @kingjeffrey and @CMS sentences: you can use the loop where it is available, and return to the kingjeffrey event handler when it is not. There is a good reason why you want to use a loop rather than writing your own event handler: as discussed in the Mozilla bug report , and loop is currently not (without a space) in any browser that I know about, this is definitely perhaps and probably will become standard in the future. Your own event handler will never be seamless in any browser (since it should swing through a JavaScript event loop). Therefore, it is better to use loop , where possible, instead of writing your own event. As pointed out in a CMS comment in Anurag's answer, you can detect loop support by querying the loop variable - if it is supported, it will be logical (false), otherwise it will be undefined since it is currently in Firefox.

Combining them:

 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(); 

Answer 3

Your code works for me in Chrome (5.0.375) and Safari (5.0). It does not work in Firefox (3.6).

See an example.

 var song = new Audio("file"); song.loop = true; document.body.appendChild(song);​ 

Answer 4

 var audio = new Audio("http://rho.nu/pub/Game%20Of%20Thrones%20-%20Main%20Theme%20-%20Soundtrack.mp3"); audio.addEventListener('canplaythrough', function() { this.currentTime = this.duration - 10; this.loop = true; this.play(); }); 

Just set loop = true to canplaythrough eventlistener.

http://jsbin.com/ciforiwano/1/edit?html,css,js,output

Answer 5

Try using jQuery for an event listener, then it will work in Firefox.

 myAudio = new Audio('someSound.ogg'); $(myAudio).bind('ended', function() { myAudio.currentTime = 0; myAudio.play(); }); myAudio.play(); 

Something like that.

Answer 6

I made it so

 <audio controls="controls" loop="loop"> <source src="someSound.ogg" type="audio/ogg" /> </audio> 

and it looks like this:

Answer 7

This works, and it is much easier to switch these methods above:

use inline: onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"

Turn on the loop $(audio_element).attr('data-loop','1'); Turn the loop to $(audio_element).removeAttr('data-loop');

Answer 8

You can try setInterval if you know the exact length of the sound. You can make setInterval play the sound every x seconds. X is the length of your sound.