HTML5 Audio Looping

Question

I ve been playing with HTML5 audio recently  and though I can get it to play the sound it only ever will play once  No matter what I try  setting the properties  event handlers  etc  I can t seem to get it to loop   Here s the basic 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 m testing using Chrome  6 0 466 0 dev  and Firefox  4 beta 1   both of which seem happy to ignore my requests for looping  Any ideas   UPDATE  The loop property is now supported in all major browsers

User · Answer

You could try a setInterval  if you know the exact length of the sound  You could have the setInterval play the sound every x seconds  X would be the length of your sound

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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 in the canplaythrough eventlistener   http   jsbin com ciforiwano 1 edit html css js output

User · Answer

Simplest way is   bgSound   new Audio  sounds background mp3    bgSound loop   true  bgSound play

User · Answer

I did it this way    lt audio controls  controls  loop  loop  gt   lt source src  someSound ogg  type  audio ogg    gt   lt  audio gt    and it looks like this

User · Answer

Try using jQuery for the event listener  it will then work in Firefox   myAudio   new Audio  someSound ogg       myAudio  bind  ended   function          myAudio currentTime   0      myAudio play         myAudio play      Something like that

User · Answer

This works and it is a lot easier to toggle that the methods above   use inline  onended  if   this  attr  data-loop     this currentTime   0  this play        Turn the looping on by   audio element  attr  data-loop   1    Turn the looping off by   audio element  removeAttr  data-loop

[javascript] HTML5 Audio Looping

Examples related to javascript

Examples related to html

Examples related to html5-audio