Música infinita en tu web con HTML5

20/May/2012 HTML5 29 Comentarios

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:

  1. <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.

  1. <audio src="micancion.mp3" autoplay="true"></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.

  1. <audio src="micancion.mp3" autoplay="true" loop="true"></audio>

Esta simple línea de código en HTML5 nos permite poner música infinita en tu web con HTML5.

29 comentarios en “Música infinita en tu web con HTML5”

Víctor Cuervo

Alejandro

Alguna forma para que funcione en celulares y tablets ??? Gracias

Víctor Cuervo

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

Víctor Cuervo

carlos

Muchas Gracias No encontraba esa linea de código. Ahora puedo terminar mi pagina web

Víctor Cuervo

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

Víctor Cuervo

Olger

style=”display:none”

Víctor Cuervo

Anna

Excelente manual para alojar la música en la web. Gracias

Víctor Cuervo

Víctor Cuervo

Gracias Anna. Nos alegra que te haya gustado.

Saludos.

Víctor Cuervo

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

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.

Víctor Cuervo

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.

https://people.safecreative.org/cardio-dancing-neurodance/w1610039362032

Víctor Cuervo

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

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.

Víctor Cuervo

Joseph

Disculpe puse el codigo todo pero no funciona :c

Víctor Cuervo

Víctor Cuervo

Joseph, te genera algún error que puedas compartir?

Saludos.

Víctor Cuervo

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

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.

Víctor Cuervo

Mitt

Perfecto Gracias

Víctor Cuervo

Víctor Cuervo

Nos alegra que te haya gustado. 😀

Víctor Cuervo

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.

Víctor Cuervo

caleb

y para reproducir mas de un archivo de audio de manera aleatoria que hacer?

Víctor Cuervo

Juan Manuel

Sirve a la perfección, muchas gracias.

Víctor Cuervo

ksgnetwork

perfecto en mi pagina web!

Víctor Cuervo

Víctor Cuervo

Nos alegra que te haya servido para ponerlo en tu web. 😀

Víctor Cuervo

caleb

y para reproducir mas de un archivo de audio de manera aleatoria que hacer?

Víctor Cuervo

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

Víctor Cuervo

@mauri, sí, la canción tiene que estar en Internet y poner la URL

Víctor Cuervo

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.

Víctor Cuervo

vola tu

Perfecto en wordpress, muchas gracias.

Víctor Cuervo

Víctor Cuervo

@vola tu, me alegro que te haya servido. 😀

Responder a caleb Cancelar respuesta

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*