javascript - HTML5 Audio Looping - Stack Overflow

admin管理员组

文章数量:1134249

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.

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.

• javascript
• html
• html5-audio

Share Improve this question Follow edited Apr 18, 2016 at 23:06 Damjan Pavlica 33.9k1010 gold badges7575 silver badges7878 bronze badges asked Jul 17, 2010 at 22:40 TojiToji 34.5k2222 gold badges108108 silver badges119119 bronze badges 5

• 2 Not sure about Chrome, but Firefox doesn't support looping. – luiscubal Commented Jul 17, 2010 at 22:42
• 2 Just start it once it's ended: myAudio.addEventListener("ended", function(e){myAudio.play();}, false); – mattbasta Commented Jul 17, 2010 at 22:47
• 1 @Brandon I wonder why this doesn't work? The only difference between this code and the accepted answer is that in the accepted answer, it sets currentTime to 0 before calling play. Is that necessary? – mgiuca Commented Jun 23, 2011 at 4:22
• 3 @Brandon Yes, see kingjeffrey's second comment on his own answer. You do need to set currentTime. – mgiuca Commented Jun 23, 2011 at 10:38
• 1 This does work just fine (at least today) – dvlden Commented Apr 9, 2016 at 0:20

Add a comment  | 

10 Answers 10

Sorted by: Reset to default 124

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

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

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

Simplest way is:

bgSound = new Audio("sounds/background.mp3");
bgSound.loop = true;
bgSound.play();

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

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.

I did it this way,

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

and it looks like this

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

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.

Everyone knows now if you type:

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

It will play the song and it will be looping But there is a shorter way to play the song continuously:

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

本文标签： javascriptHTML5 Audio LoopingStack Overflow