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

发布于 2024-12-09 19:42:18 字数 756 浏览 0 评论 0原文

截至撰写本文时，该网站位于：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>

音频在 Chrome、IE9 和 Firefox 中播放正常，但在后者中不循环。音频文件不可能格式错误，因为它是由 Audacity 制作的。为什么不循环还有其他解释吗？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

银河中√捞星星 2024-12-16 19:42:18

您只需执行此

属性即可，

不需要有其他任何内容。

编辑

据此，Firefox 不喜欢循环。它建议一个js解决方案：

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

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

编辑

HTML5 音频循环现在适用于 Firefox。在 26.0 版本中得到确认（可能更早）

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)

回复收藏 0 原文

以可爱出名 2024-12-16 19:42:18

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

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

如果计算结果为 true，则在浏览器中实现循环。如果是假的，那就不是。将其添加到您的 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);
}

那么即使在不支持的浏览器中它也应该循环。

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.

回复收藏 0 原文

~没有更多了~