Я недавно играл со звуком 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), которые оба рады игнорировать мои запросы на зацикливание. Любые идеи?

ОБНОВЛЕНИЕ . Свойство цикла теперь поддерживается во всех основных браузерах. ,

86
Toji 18 Июл 2010 в 02:40

8 ответов

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

См. Пример.

var song = new Audio("file");
song.loop = true;
document.body.appendChild(song);​
19
Anurag 17 Июл 2010 в 23:09

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

0
Zack 10 Мар 2015 в 23:47

Я сделал это так,

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

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

enter image description here

1
Tomarinator 11 Июн 2012 в 04:04

Чтобы добавить еще несколько советов, объединяющих предложения @kingjeffrey и @CMS: вы можете использовать loop там, где он доступен, и использовать обработчик событий kingjeffrey, когда его нет. Есть веская причина, почему вы хотите использовать loop, а не писать свой собственный обработчик событий: как описано в Отчет об ошибках Mozilla, хотя 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();
61
mgiuca 23 Июн 2011 в 10:54
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 в списке прослушиваний.

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

3
JazzCat 29 Апр 2015 в 16:14

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

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

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

0
ACarter 16 Фев 2014 в 20:15

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

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

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

myAudio.play();

Что-то такое.

2
Matt 2 Мар 2012 в 14:14

Самый простой способ:

bgSound = new Audio("sounds/background.mp3");
bgSound.loop = true;
bgSound.play();
1
jai3232 29 Мар 2018 в 16:04