HTML5 аудио зацикливание

Question

HTML5 аудио зацикливание

Я недавно играл с HTML5 audio, и хотя я могу заставить его воспроизводить звук, он будет воспроизводиться только один раз. Независимо от того, что я пытаюсь (установка свойств, обработчиков событий и т. д.), Я не могу заставить его зацикливаться.

вот основной код, который я использую:

//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 это сейчас поддерживает во всех основных браузерах.

556 9

javascript html5 html5-audio

9 ответов:

Comments

Ничего не найдено.

kingjeffrey · Accepted Answer · 2010-07-18 02:34:10

пока loop указан, он не реализован в ~~любой браузер, о котором я знаю~~Firefox [спасибо Anurag за указание на это]. Вот альтернативный способ зацикливания, который должен работать в браузерах с поддержкой HTML5:
myAudio = new Audio('someSound.ogg'); 
myAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
myAudio.play();

mgiuca · Accepted Answer · 2011-06-23 13:54:12

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

Anurag · Accepted Answer · 2010-07-18 02:09:04

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

см. Пример.
var song = new Audio("file");
song.loop = true;
document.body.appendChild(song);

JazzCat · Accepted Answer · 2015-04-29 19:14:07

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, выход

Matt · Accepted Answer · 2012-03-02 16:14:31

попробуйте использовать jQuery для прослушивателя событий, он будет работать в Firefox.
myAudio = new Audio('someSound.ogg');

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

myAudio.play();
что-то подобное.

Tomarinator · Accepted Answer · 2012-06-11 07:04:19

Я сделал это таким образом,
<audio controls="controls" loop="loop">
<source src="someSound.ogg" type="audio/ogg" />
</audio>
и это выглядит так

jai3232 · Accepted Answer · 2018-03-29 19:04:01

самый простой способ-это:
bgSound = new Audio("sounds/background.mp3");
bgSound.loop = true;
bgSound.play();

WebsterDevelopine · Accepted Answer · 2014-02-16 22:15:31

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

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

включите цикл на $(audio_element).attr('data-loop','1'); Выключите цикл с помощью $(audio_element).removeAttr('data-loop');

Zack · Accepted Answer · 2015-03-11 01:47:40

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