Ya hemos visto como Poner música en tu web con HTML5 de una forma sencilla manejando el elemento AUDIO. Ahora vamos a dar un pequeño paso más y es que vamos a poner música infinita en tu web con HTML5. Es decir, la canción que pongamos de fondo sonará una y otra vez de forma infinita.
Lo primero poner el audio en HTML5:
<audio src="micancion.mp3"></audio>
Lo bueno de la etiqueta AUDIO es que, por defecto, no nos muestra un panel con controles de reproducción. Lo cual hará que sea perfecto para poner nuestra música de fondo. Pero claro, deberemos de iniciar la canción. Para ello vamos a utilizar el primer atributo que es autoplay. Al atributo autoplay del AUDIO le daremos un valor true.
<audio src="micancion.mp3" autoplay="autoplay"></audio>
Ahora que ya tenemos la canción sonando de fondo vamos a conseguir que la música suene de forma infinita. En este caso usaremos el atributo loop. Al cual volveremos a dar nuevamente un valor de true.
<audio src="micancion.mp3" autoplay="autoplay" loop="loop"></audio>
Esta simple línea de código en HTML5 nos permite poner música infinita en tu web con HTML5.
Josue
Hola no me funciona el autoplay, que puedo hacer?
armando
como puedo agregar una lista de canciones en codigo html que sean reproducibles al elegirlas?
Ricardo
Cómo se haría para reproducir un playlist con canciones que estén alojadas en un directorio que esté en el mismo servidor y que el reproductor las reproduzca sin parar?
Alejandro
Alguna forma para que funcione en celulares y tablets ??? Gracias
ikard
bunas, como puedo hacer para cambiar de seccion en mi pagina no se corte la musica, por ejemplo darle a inicio a mi web y que reprodusca en donde yo me quede
carlos
Muchas Gracias No encontraba esa linea de código. Ahora puedo terminar mi pagina web
Facundo
Hola Excelente la explicación, pero como se podría hacer para que no muestre los controles de audio. necesito solamente que reproduzca el mp3 pero no que muestre los controles. Gracias y Saludos
Olger
style=»display:none»
Anna
Excelente manual para alojar la música en la web. Gracias
Víctor Cuervo
Gracias Anna. Nos alegra que te haya gustado.
Saludos.
Cristian Maine
Necesito una lista de reproduccion mientras navegas por una misma seccion de la pagina que no se corte el auto reproducido de una lista al azar, gracias
Víctor Cuervo
Cristian, ¿Qué entiendes por sección de la página? ¿Cambiaría de URL?
Lo de la música al azar me parece muy interesante, voy a escribir un artículo al respecto.
Saludos.
Cristian Maine
Gracias, lo resolvi con Icecast2, instale en mi server el streaming, de nuevo.. lo resolvi asi, gracias.
Fijate en esta pagina si podes hacer algo parecido talvez con iframe se hace, cuando seguis navegando en otros links la musica no se corta sigue reproduciendo.
Cardio Dancing – Neurodance
Andres
Hola; para que el sonido de la musica sea bien baja como cambio el volumen ? y tbn para que no se corte la musica al navegar en la pagina cambiando de pestañas ??
Víctor Cuervo
Hola Andrés,
Para el volumen lo puedes modificar mediante el API.
var vid = document.getElementById("myVideo"); vid.volume = 0.2;En cuanto al cambio de pestañas es más complicado ya que solo se escuchará cuando la pestaña esté activa. Podrías implantar la navegación dentro de un iframe y así mantener la música sonando.
Espero que esto te oriente.
Saludos.
Joseph
Disculpe puse el codigo todo pero no funciona :c
Víctor Cuervo
Joseph, te genera algún error que puedas compartir?
Saludos.
Gerardo
ya puse el codigo y funciono perfecto en mi pagina web (navegador google chrome), pero cuando abro mi web en mi movil (navegardor google chrome) no reproduce el audio, que puedo hacer en ese caso?
Víctor Cuervo
Gerardo puede ser por el formato de audio que hayas utilizado, ¿tienes la página web pública para echarla un ojo?
Saludos.
Mitt
Perfecto Gracias
Víctor Cuervo
Nos alegra que te haya gustado. :-D
Mary
Hola. Soy novata y luego de googlear por infinitas web, he encontrado en música infinita, parte de la solución. Mi pregunta es que a parte de ver el reproductor, me gustaría que se reprodujera el mp3 automaticamente, cuando abran la página y poder agregar el nombre del tema y el autor. Me pueden guiar, por favor. Muchas gracias.
caleb
y para reproducir mas de un archivo de audio de manera aleatoria que hacer?
Juan Manuel
Sirve a la perfección, muchas gracias.
ksgnetwork
perfecto en mi pagina web!
Víctor Cuervo
Nos alegra que te haya servido para ponerlo en tu web. :-D
caleb
y para reproducir mas de un archivo de audio de manera aleatoria que hacer?
Alex
Hola quisiera saber de que manera puedo hacer que el sonido no vuelva a empezar al navegar por el sitio, alo cargar una nueva pagina
Víctor Cuervo
@mauri, sí, la canción tiene que estar en Internet y poner la URL
mauri
la canción debe ser subida a Internet y poner el URL para que así la puedan oír todos verdad? estoy empezando en eso.
vola tu
Perfecto en wordpress, muchas gracias.
Víctor Cuervo
@vola tu, me alegro que te haya servido. :-D