Html 为什么我的 HTML5 音频不会循环播放?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7747526/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:05:32  来源:igfitidea点击:

Why won't my HTML5 audio loop?

htmlaudio

提问by Andrea

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

在撰写本文时,该网站位于:http: //ajf.me/stuff/eva。源代码是这样的:

<!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?

音频在 Chrome、IE9 和 Firefox 中播放良好,但在后者中不会循环播放。音频文件不能格式错误,因为它是由 Audacity 制作的。有没有其他解释为什么它不循环?

回答by Jason Gennaro

You can just do this

你可以这样做

<audio autoplay loop>

<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:

据此,Firefox 不喜欢loop. 它提出了一个js解决方案:

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

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

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)

HTML5 音频循环现在适用于 Firefox。在 26.0 版中确认(可能更早)

回答by Michal

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:

Firefox 还没有实现循环。我会检查您是否拥有最新版本的 Firefox,但我相信情况仍然如此。您可以通过以下方式检查它是否受支持:

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.

如果结果为真,则在浏览器中实现循环。如果为假,则不是。将其添加到您的 javascript,在您的音频上放置一个 id 标签并使用该 if 语句来检查循环。

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.

然后它甚至应该在不受支持的浏览器中循环。