Цикл аудіозаписів HTML5

Нещодавно я грав з аудіо HTML5, і хоча я можу змусити його відтворити звук, який він колись відтворюватиме лише один раз. Незалежно від того, що я намагаюся (встановлюючи властивості, обробники подій тощо), здається, я не можу змусити це зациклюватися.

Ось основний код, який я використовую:

//myAudio is declared at a global scope, so it doesn't get garbage collected.
myAudio = new Audio('someSound.ogg');
myAudio.loop = true;
myAudio.play();

Я тестую за допомогою Chrome (6.0.466.0 dev) та Firefox (4 beta 1), які, здається, із задоволенням ігнорують мої запити на цикл. Будь-які ідеї?

ОНОВЛЕННЯ : Властивість циклу тепер підтримується у всіх основних браузерах.

Поки loopвказано, воно не реалізовано вбудь-який відомий мені браузер Firefox [дякую Анурагу за те, що на це вказав] . Ось альтернативний спосіб циклу, який повинен працювати в браузерах, що підтримують HTML5:

var myAudio = new Audio('someSound.ogg'); 
myAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
myAudio.play();

Щоб додати ще кілька порад, що поєднують пропозиції @kingjeffrey та @CMS: Ви можете використовувати loopтам, де це доступно, і повернутися до обробника подій kingjeffrey, коли цього немає. Існує вагома причина, чому ви хочете використовувати, loopа не писати власний обробник подій: Як уже обговорювалося у звіті про помилки Mozilla , хоча в loopданий час він не циклічно (без прогалини) в жодному відомому мені браузері, це, безумовно, можливо стати стандартом у майбутньому. Ваш власний обробник подій ніколи не буде бездоганним у будь-якому браузері (оскільки він повинен прокачуватись через цикл подій JavaScript). Тому найкраще використовувати loopтам, де це можливо, замість того, щоб писати власну подію. Як зазначив CMS у коментарі до відповіді Анурага,looploop змінна - якщо вона підтримується, вона буде логічною (помилковою), інакше вона буде невизначеною, як і зараз у Firefox.

Склавши їх разом:

myAudio = new Audio('someSound.ogg'); 
if (typeof myAudio.loop == 'boolean')
{
    myAudio.loop = true;
}
else
{
    myAudio.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);
}
myAudio.play();

Ваш код працює для мене в Chrome (5.0.375) та Safari (5.0). Не замикається на Firefox (3.6).

Див. Приклад.

var song = new Audio("file");
song.loop = true;
document.body.appendChild(song);​

var audio = new Audio("http://rho.nu/pub/Game%20Of%20Thrones%20-%20Main%20Theme%20-%20Soundtrack.mp3");

audio.addEventListener('canplaythrough', function() {
    this.currentTime = this.duration - 10;
    this.loop = true;
    this.play();
});

Просто встановіть loop = true у списку подій canplaythrough.

http://jsbin.com/ciforiwano/1/edit?html,css,js,output

Найпростіший спосіб:

bgSound = new Audio("sounds/background.mp3");
bgSound.loop = true;
bgSound.play();

Спробуйте використати jQuery для прослуховувача подій, тоді він буде працювати у Firefox.

myAudio = new Audio('someSound.ogg');

$(myAudio).bind('ended', function()  {
    myAudio.currentTime = 0;
    myAudio.play();
});

myAudio.play();

Щось таке.

Я зробив це таким чином,

<audio controls="controls" loop="loop">
<source src="someSound.ogg" type="audio/ogg" />
</audio>

і це виглядає так

Це працює, і набагато простіше переключитись, що описані вище методи:

використовувати вбудований: onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"

Увімкніть цикл на $(audio_element).attr('data-loop','1'); Вимкніть цикл на$(audio_element).removeAttr('data-loop');

Ви можете спробувати setInterval, якщо знаєте точну довжину звуку. Ви можете налаштувати setInterval відтворювати звук кожні x секунд. X - це довжина вашого звуку.