Недавно я играл со звуком 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), оба из которых, кажется, счастливы игнорировать мои запросы на зацикливание. Есть идеи?
ОБНОВЛЕНИЕ : свойство цикла теперь поддерживается во всех основных браузерах.
javascript
html
html5-audio
Тодзи
источник
источник
currentTime
перед вызовом он устанавливается на 0play
. Это необходимо?currentTime
.Ответы:
В то время как
loop
указано, влюбой браузер, о котором я знаюFirefox [благодарит Anurag за указание на это] . Вот альтернативный способ зацикливания, который должен работать в браузерах с поддержкой HTML5:var myAudio = new Audio('someSound.ogg'); myAudio.addEventListener('ended', function() { this.currentTime = 0; this.play(); }, false); myAudio.play();
источник
this.startTime
для возврата к самому раннему доступному времени..currentTime
это нужно, связана с тем, как спецификация обрабатывает конец песни. Браузеры должны просто приостанавливать воспроизведение песни. Таким образом, возобновление игры происходит в конце песни. Точка воспроизведения должна быть сброшена..currentTime
работе. Внутри функции обратного вызова вы можете просто повторно объявитьmyAudio
тот же файл и воспроизвести его снова. При повторном объявлении точка воспроизведения также должна быть сброшена на начало песни.Чтобы добавить еще несколько советов, объединяющих предложения @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();
источник
Ваш код работает для меня в Chrome (5.0.375) и Safari (5.0). Не зацикливается на Firefox (3.6).
См. Пример.
var song = new Audio("file"); song.loop = true; document.body.appendChild(song);
источник
loop
это реализовано в webkit.loop
поддерживается ли это, например:typeof new Audio().loop == 'boolean';
==
и использования===
, это лучший оператор для новичков и лучше для производительности.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 будет длиной вашего звука.
источник