html - Why won't my HTML5 audio loop?

Question

Welcome To Ask or Share your Answers For Others

html - Why won't my HTML5 audio loop?

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Why won't my HTML5 audio loop?

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T17:55:42+0000

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)

Categories

html - Why won't my HTML5 audio loop?

html - Why won't my HTML5 audio loop?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags