Ostatnio bawiłem się dźwiękiem HTML5 i chociaż mogę go zmusić do odtwarzania dźwięku, będzie on odtwarzany tylko raz. Bez względu na to, co próbuję (ustawianie właściwości, programów obsługi zdarzeń itp.) Nie wydaje się, żebym zapętlał to.
Oto podstawowy kod, którego używam:
//myAudio is declared at a global scope, so it doesn't get garbage collected.
myAudio = new Audio('someSound.ogg');
myAudio.loop = true;
myAudio.play();
Testuję na Chrome (6.0.466.0 dev) i Firefox (4 beta 1), z których oba wydają się być szczęśliwe, ignorując moje żądania zapętlenia. Jakieś pomysły?
UPDATE : Właściwość loop jest teraz obsługiwana we wszystkich głównych przeglądarkach.
javascript
html
html5-audio
Toji
źródło
źródło
currentTime
na 0 przed wywołaniemplay
. Czy to konieczne?currentTime
.Odpowiedzi:
Chociaż
loop
jest określony, nie jest zaimplementowany w programiejakąkolwiek przeglądarkę, którą znamFirefox [dziękuje Anurag za wskazanie tego] . Oto alternatywny sposób zapętlania, który powinien działać w przeglądarkach obsługujących HTML5:var myAudio = new Audio('someSound.ogg'); myAudio.addEventListener('ended', function() { this.currentTime = 0; this.play(); }, false); myAudio.play();
źródło
this.startTime
aby powrócić do najwcześniejszego dostępnego czasu..currentTime
jest potrzebny, dotyczy tego, jak specyfikacja radzi sobie z końcem piosenki. Przeglądarki mają po prostu wstrzymać piosenkę. Tak więc ponowne rozpoczęcie odtwarzania robi to pod koniec utworu. Głowicę należy zresetować..currentTime
pracy. Wewnątrz funkcji wywołania zwrotnego możesz po prostu ponownie zadeklarowaćmyAudio
ten sam plik i odtworzyć go ponownie. Ponowne zadeklarowanie powinno również zresetować głowicę odtwarzania do początku utworu.Aby dodać więcej porad łączących sugestie @kingjeffrey i @CMS: Możesz użyć
loop
tam, gdzie jest dostępny, i wrócić do obsługi zdarzeń kingjeffrey, gdy nie jest. Jest dobry powód, dla którego chcesz używaćloop
i nie pisać własnego modułu obsługi zdarzeń: jak omówiono w raporcie o błędzie Mozilli , chociażloop
obecnie nie jest to płynna pętla (bez przerwy) w żadnej przeglądarce, którą znam, z pewnością jest to możliwe stać się standardem w przyszłości. Twój własny moduł obsługi zdarzeń nigdy nie będzie działał bezproblemowo w żadnej przeglądarce (ponieważ musi przepływać przez pętlę zdarzeń JavaScript). Dlatego najlepiej jest używać,loop
jeśli to możliwe, zamiast pisać własne wydarzenie. Jak wskazał CMS w komentarzu do odpowiedzi Anurag,loop
loop
zmienna - jeśli jest obsługiwana, będzie wartością logiczną (fałsz), w przeciwnym razie będzie niezdefiniowana, tak jak obecnie jest w Firefoksie.Składając je razem:
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();
źródło
Twój kod działa u mnie w Chrome (5.0.375) i Safari (5.0). Nie zapętla się w przeglądarce Firefox (3.6).
Zobacz przykład.
var song = new Audio("file"); song.loop = true; document.body.appendChild(song);
źródło
loop
został zaimplementowany w webkit.loop
typeof new Audio().loop == 'boolean';
==
i używania===
, jest to lepszy operator dla początkujących i lepszy pod względem wydajności.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(); });
Po prostu ustaw loop = true w programie canplaythrough eventlistener.
http://jsbin.com/ciforiwano/1/edit?html,css,js,output
źródło
Najprostszy sposób to:
bgSound = new Audio("sounds/background.mp3"); bgSound.loop = true; bgSound.play();
źródło
Spróbuj użyć jQuery jako nasłuchiwania zdarzeń, będzie wtedy działać w przeglądarce Firefox.
myAudio = new Audio('someSound.ogg'); $(myAudio).bind('ended', function() { myAudio.currentTime = 0; myAudio.play(); }); myAudio.play();
Coś w tym stylu.
źródło
Zrobiłem to w ten sposób
<audio controls="controls" loop="loop"> <source src="someSound.ogg" type="audio/ogg" /> </audio>
i wygląda to tak
źródło
To działa i znacznie łatwiej jest przełączać powyższe metody:
użyj w tekście:
onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"
Włącz pętlę przez
$(audio_element).attr('data-loop','1');
Wyłącz pętlę przez$(audio_element).removeAttr('data-loop');
źródło
Możesz spróbować setInterval, jeśli znasz dokładną długość dźwięku. Możesz ustawić setInterval na odtwarzanie dźwięku co x sekund. X byłby długością twojego dźwięku.
źródło