Question

在撰写本文时，该网站位于：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生成的。为什么它不循环还有其他解释吗？

Answer 1

你可以这样做

<audio autoplay loop>

属性不需要任何其他内容。

修改

据此，Firefox不喜欢loop。它提出了一个js解决方案：

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

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

修改

HTML5音频循环现在可以与firefox一起使用。在版本26.0中确认（可能更早）

Answer 2

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

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

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

2 个答案: