javascript - reproductor - insertar audio mp3 en html
Bucle de audio HTML5 (9)
Esto funciona y es mucho más fácil alternar que los métodos anteriores:
use inline: onended="if($(this).attr(''data-loop'')){ this.currentTime = 0; this.play(); }"
Active el bucle por $(audio_element).attr(''data-loop'',''1''); Desactiva el bucle por $(audio_element).removeAttr(''data-loop'');
He estado jugando con audio HTML5 recientemente, y aunque puedo hacer que reproduzca el sonido, solo tocará una vez. No importa lo que intento (establecer las propiedades, los manejadores de eventos, etc.) parece que no puedo obtenerlo.
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 usando Chrome (desarrollador 6.0.466.0) y Firefox (4 beta 1), y ambos parecen felices de ignorar mis solicitudes de bucle. ¿Algunas ideas?
ACTUALIZACIÓN : la propiedad de bucle ahora es supported con todos los principales navegadores.
Intenta 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.
La forma más simple es:
bgSound = new Audio("sounds/background.mp3");
bgSound.loop = true;
bgSound.play();
Lo hice de esta manera,
<audio controls="controls" loop="loop">
<source src="someSound.ogg" type="audio/ogg" />
</audio>
y parece que esto
Mientras se especifica loop , no se implementa en cualquier navegador del que tenga conocimiento Firefox [le agradece a Anurag por señalar esto] . Aquí hay una forma alternativa de bucle que debería funcionar en navegadores compatibles con HTML5:
myAudio = new Audio(''someSound.ogg'');
myAudio.addEventListener(''ended'', function() {
this.currentTime = 0;
this.play();
}, false);
myAudio.play();
Para agregar más consejos que combinen las sugerencias de @kingjeffrey y @CMS: puede usar el 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 utilizar el loop y no escribir su propio controlador de eventos: como se discutió en el informe de fallas de Mozilla , mientras que el loop actualmente no hace bucles sin interrupciones en ningún navegador que conozca, es ciertamente posible y Es probable que se convierta en estándar en el futuro. Su propio controlador de eventos nunca será perfecto en ningún navegador (ya que tiene que moverse a través del bucle de eventos de JavaScript). Por lo tanto, es mejor usar loop donde sea posible en lugar de escribir su propio evento. Como CMS señaló en un comentario sobre la respuesta de Anurag, puede detectar el soporte de loop consultando la variable de loop : si es compatible, será booleano (falso), de lo contrario no estará definido, como lo está actualmente en Firefox.
Poniendo esto 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();
Podría probar un 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.
Tu código funciona para mí en Chrome (5.0.375) y Safari (5.0). No hace bucle en Firefox (3.6).
var song = new Audio("file");
song.loop = true;
document.body.appendChild(song);
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();
});
Solo configure loop = true en el evento eventlistener canplaythrough.