HTML5 Audio Looping

Question

Недавно я играл с аудио 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 бета-1), оба из которых, кажется, рад игнорировать мои просьбы о зацикливание. Есть идеи?

UPDATE: Свойство loop теперь supported во всех основных браузерах.

Answer 1

Хотя loop указано, оно не реализовано в любой браузер, я отдаю себе отчет вFirefox [спасибо Анураг за указание на это]. Вот альтернативный способ зацикливание, который должен работать в HTML5, способных браузеров:

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

Answer 2

Ваш код работает для меня на Chrome (5.0.375) и Safari (5,0). Не работает в Firefox (3.6).

See example.

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

Answer 3

Чтобы добавить еще несколько советов, сочетающий в себе предложения @kingjeffrey и @CMS: Вы можете использовать loop, где он доступен и упасть обратно на обработчик события kingjeffrey, когда это не так. Есть хорошая причина, по которой вы хотите использовать loop, а не писать собственный обработчик событий: как обсуждалось в Mozilla bug report, а loop в настоящее время не плавно (без пробела) не зацикливается в любом браузере, я знаю, это, безусловно, возможно и, вероятно, стать стандартом в будущем. Ваш собственный обработчик событий никогда не будет бесшовным в любом браузере (так как он должен качать через цикл событий JavaScript). Поэтому лучше всего использовать loop, где это возможно, вместо написания собственного события. Как указано в комментарии CMS в комментарии к ответу Anurag, вы можете обнаружить поддержку для loop, запросив переменную loop - если она будет поддерживаться, она будет логической (false), в противном случае она будет неопределенной, так как в настоящее время она находится в 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(); 

Answer 4

Попробуйте использовать JQuery для слушателя событий, он будет работать в Firefox.

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

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

myAudio.play(); 

Что-то в этом роде.

Answer 5

Я сделал это таким образом,

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

, и это выглядит как этот

Answer 6

Это работает, и это намного проще для переключения, что методы выше:

использование inline: onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"

Включите петлю $(audio_element).attr('data-loop','1'); Поверните зацикливание на $(audio_element).removeAttr('data-loop');

Answer 7

Вы можете попробовать setInterval, если вы знаете точную длину звука. Вы можете заставить setInterval воспроизводить звук каждые x секунд. X будет длительностью вашего звука.

Answer 8

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.

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