Почему мой HTML5 не зацикливается на аудио? - PullRequest
3 голосов
/ 13 октября 2011

Сайт работает по адресу: 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.Есть ли другое объяснение, почему оно не зацикливается?

Ответы [ 2 ]

9 голосов
/ 13 октября 2011

Вы можете просто сделать это

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


EDIT

HTML5 аудио цикл теперь работает с Firefox.Подтверждено в версии 26.0 (возможно, раньше)

8 голосов
/ 13 октября 2011

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

Тогда он должен выполняться даже в неподдерживаемых браузерах.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...