Why won't my HTML5 audio loop?

Question

The site is up at: http://ajf.me/stuff/eva at the time of writing. The source code is this:

<!DOCTYPE html>
<html style="height: 100%;">
<head>
<title>eva</title>
</head>
<body style="background-color: black; background-image: url('eva.png'); background-repeat: no-repeat; background-position: center center; height: 100%; margin: 0px; padding: 0px;">
<audio autoplay loop>
    <source src="eva.mp3" type="audio/mpeg" />
    <source src="eva.ogg" type="audio/ogg" />
    <source src="eva.wav" type="audio/wav" />
</audio>
</body>
</html>

The audio plays fine in Chrome, IE9, and Firefox, but does not loop in the latter. The audio file can't be malformed, as it was produced by Audacity. Is there any other explanation for why it doesn't loop?

Self-closing tags and that `autoplay="autoplay" loop="loop"` doubled-Boolean-attribute business were only required for XHTML, if I'm remembering correctly. ` — John Flatness, Oct 12 '11 at 23:02
In Firebug, `document.body.children[0].loop` is `undefined`, yet `document.body.children[0].autoplay` is `true`, mysteriously — Andrea, Oct 12 '11 at 23:06

score 9 · Accepted Answer · edited Dec 22 '13 at 15:08

9

You can just do this

<audio autoplay loop>

The attributes do not need to have anything else.

EDIT

According to this, Firefox doesn't like loop. It suggests a js solution:

document.getElementById('audio_2').addEventListener('ended', function(){
    this.currentTime = 0;
}, false);

http://forestmist.org/2010/04/html5-audio-loops/

EDIT

HTML5 audio loop now works with firefox. Confirmed in version 26.0 (might have been earlier)

edited Dec 22 '13 at 15:08

defect833

275
7
22

answered Oct 12 '11 at 23:01

Jason Gennaro

34,535
8
65
86

I had same problem as OP, used both loop attribute AND event listener, now works in FF, IE and Chrome. – GSPdibbler Aug 01 '14 at 07:08

score 9 · Answer 2 · answered Oct 12 '11 at 23:07

Firefox has not yet implemented loop. I would check that you have the newest version of Firefox, but I believe this is still the case. You can check whether or not it is supported with:

if (typeof new Audio().loop == 'boolean')

If that evaluates to true, then loop is implemented in the browser. If false, then it is not. Add that to your javascript, put an id tag on your audio and use that if statement to check for loop.

if !(typeof new Audio().loop == 'boolean') {
    audioToLoop = document.getElementById('audio_id_here');
    audioToLoop.addEventListener('ended', function () {
        this.currentTime = 0;
        this.play();
    }, false);
}

Then it should loop even in unsupported browsers.

Why won't my HTML5 audio loop?

2 Answers2

Linked

Related