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

currentTimeen 0 antes de llamarplay. ¿Es eso necesario?currentTime.Respuestas:
Si bien
loopse 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.startTimepara volver a la primera hora disponible..currentTimese 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..currentTimetrabajar. Dentro de la función de devolución de llamada, simplemente puedemyAudiovolver 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
loopdonde esté disponible y recurrir al controlador de eventos de kingjeffrey cuando no lo esté. Hay una buena razón por la que desea usarloopy no escribir su propio controlador de eventos: como se discutió en el informe de error de Mozilla , aunqueloopactualmente 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 usarloloopsiempre que sea posible en lugar de escribir su propio evento. Como señaló CMS en un comentario sobre la respuesta de Anurag,looploopVariable: 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
loopse implementó en webkit.loopes 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