Недавно я играл с аудио 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), оба из которых, похоже, с удовольствием игнорируют мои запросы на цикл. Любые идеи?
UPDATE: свойство loop теперь поддерживается во всех основных браузерах.
Пока указан loop, он не реализован в в любом браузере, о котором я знаю Firefox [спасибо Anurag за указание этого]. Вот альтернативный способ цикла, который должен работать в браузерах, поддерживающих HTML5:
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 в ответе Anurag, вы можете обнаружить поддержку loop путем запроса переменной loop - если она поддерживается, она будет логической (false), в противном случае она будет undefined, так как он в настоящее время находится в 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 eventlistener.
Попробуйте использовать 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>
и это выглядит так:
Это работает, и намного проще переключить эти методы выше:
использовать inline: 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 будет длиной вашего звука.