He estado jugando con audio HTML5 recientemente, y aunque puedo hacer que reproduzca el sonido, solo se reproducirá una vez. No importa lo que intente (configurar las propiedades, los controladores de eventos, etc.), parece que no puedo hacer que se repita.
Aquí está el código básico que estoy usando:
//myAudio is declared at a global scope, so it doesn't get garbage collected.
myAudio = new Audio('someSound.ogg');
myAudio.loop = true;
myAudio.play();
Estoy probando con Chrome (6.0.466.0 dev) y Firefox (4 beta 1), los cuales parecen felices de ignorar mis solicitudes de bucle. ¿Algunas ideas?
ACTUALIZACIÓN : La propiedad de bucle ahora es compatible con todos los navegadores principales.
javascript
html
html5-audio
Toji
fuente
fuente
currentTime
en 0 antes de llamarplay
. ¿Es eso necesario?currentTime
.Respuestas:
Si bien
loop
se especifica, no se implementa encualquier navegador del que tenga conocimientoFirefox [agradece a Anurag por señalar esto] . Aquí hay una forma alternativa de bucle que debería funcionar en navegadores compatibles con HTML5:var myAudio = new Audio('someSound.ogg'); myAudio.addEventListener('ended', function() { this.currentTime = 0; this.play(); }, false); myAudio.play();
fuente
this.startTime
para volver a la primera hora disponible..currentTime
se necesita tiene que ver con cómo la especificación maneja el final de una canción. Se supone que los navegadores solo deben pausar la canción. Entonces, reiniciar el juego lo hace al final de la canción. El cabezal de reproducción debe reiniciarse..currentTime
trabajar. Dentro de la función de devolución de llamada, simplemente puedemyAudio
volver a declarar con el mismo archivo y reproducirlo nuevamente. Redeclararlo también debería restablecer el cabezal de reproducción al comienzo de la canción.Para agregar algunos consejos más que combinen las sugerencias de @kingjeffrey y @CMS: Puede usar
loop
donde esté disponible y recurrir al controlador de eventos de kingjeffrey cuando no lo esté. Hay una buena razón por la que desea usarloop
y no escribir su propio controlador de eventos: como se discutió en el informe de error de Mozilla , aunqueloop
actualmente no se repite sin problemas (sin un espacio) en cualquier navegador que conozca, ciertamente es posible y probable se convierta en estándar en el futuro. Su propio controlador de eventos nunca será perfecto en ningún navegador (ya que tiene que bombear a través del ciclo de eventos de JavaScript). Por lo tanto, es mejor usarloloop
siempre que sea posible en lugar de escribir su propio evento. Como señaló CMS en un comentario sobre la respuesta de Anurag,loop
loop
Variable: si es compatible, será un booleano (falso); de lo contrario, no estará definido, como lo está actualmente en Firefox.Poniendo estos juntos:
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();
fuente
Tu código me funciona en Chrome (5.0.375) y Safari (5.0). No se repite en Firefox (3.6).
Ver ejemplo.
var song = new Audio("file"); song.loop = true; document.body.appendChild(song);
fuente
loop
se implementó en webkit.loop
es compatible, por ejemplo, por:typeof new Audio().loop == 'boolean';
==
y el uso===
, es un mejor operador para los principiantes y mejor para el rendimiento.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(); });
Simplemente establezca loop = true en canplaythrough eventlistener.
http://jsbin.com/ciforiwano/1/edit?html,css,js,output
fuente
La forma más sencilla es:
bgSound = new Audio("sounds/background.mp3"); bgSound.loop = true; bgSound.play();
fuente
Intente usar jQuery para el detector de eventos, luego funcionará en Firefox.
myAudio = new Audio('someSound.ogg'); $(myAudio).bind('ended', function() { myAudio.currentTime = 0; myAudio.play(); }); myAudio.play();
Algo como eso.
fuente
Lo hice de esta manera
<audio controls="controls" loop="loop"> <source src="someSound.ogg" type="audio/ogg" /> </audio>
y se ve así
fuente
Esto funciona y es mucho más fácil alternar que los métodos anteriores:
utilizar en línea:
onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"
Encienda el bucle
$(audio_element).attr('data-loop','1');
Apague el bucle$(audio_element).removeAttr('data-loop');
fuente
Puede probar con setInterval, si conoce la duración exacta del sonido. Puede hacer que setInterval reproduzca el sonido cada x segundos. X sería la duración de tu sonido.
fuente