Poner música en tu web con HTML5

16/May/2012 HTML5 , 22 Comentarios

Una de las cosas que ya está estandarizada en HTML5 es la reproducción de elementos de audio. Es decir, podemos poder música en la web de una forma estándar.

Para poder poner música en las webs, HTML5 ha estandarizado el elemento AUDIO. Así que, lo que tendremos que hacer, para poner un archivo de música será insertar la siguiente etiqueta:

<audio src="cancion"></audio>

Por lo tanto, si nuestra canción es «micancion.mp3» el código a utilizar será:

<audio src="micancion.mp3"></audio>

Si escribimos solamente este código no llegaremos muy lejos ya que, por defecto, el elemento de audio no se muestra. Por lo tanto no podremos utilizar los botones de play, stop, pause,… Así, si queremos que el elemento de AUDIO venga con un reproductor deberemos de añadir el autributo controls.

<audio src="micancion.mp3" controls="controls"></audio>

 

Así ya tendremos el reproductor que nos permita poner la música en nuestra web con HTML5</a.

Los formatos que podemos reproducir mediante el elemento AUDIO de HTML5</a son:

  • MPEG-1 audio layer 3, que son los más que de sobra conocidos como MP3 y extensión .mp3.
  • Advanced Audio Coding, mejoraban la calidad de sonido de los MP3 y es un formato promovido por Apple. Su extensión es .acc. Este formato funciona bajo pantentes
  • Vorbis, o conocido como Ogg Vorbis. Es un formato libre de patentes. La extensión que utilizan es .ogg

22 comentarios en “Poner música en tu web con HTML5”

Víctor Cuervo

david

HOLA TENGO UN GAME DE XNOVA COMO LE PUEDO PONER UN AUDIO

Víctor Cuervo

Angie

Hola buenas tardes, disculpe…..para agregar música en mi pagina web desde «mi biblioteca(escritorio)»
¿Cómo lo puedo hacer?
Gracias.

Víctor Cuervo

DJ Scihacker

Hola. Primero debes subirla a algún lado, y luego a continuación de src= el enlace a la canción. Si quieres que la gente lo escuche desde tu máquina directamente, deberías hacer algunas cosas más, o montar una radio virtual.

Víctor Cuervo

Víctor Cuervo

Muy buen punto. @Angie, es como te comenta @DJ Scihacker. Tienes que subir tu música al servidor.

Saludos.

Víctor Cuervo

dtulf

hola, cómo puedo hacer para alinearlo a la derecha?

Víctor Cuervo

Dany Andersen DJ

Hola, Víctor. Tengo un canal de streaming con reproductores insertados en flash en mi sitio y en un par de blogs. Me recomendaron que deje el flash y use HTML5. He probado diferentes opciones para insertarlo, pero no consigo reproducirlo en Iceweasel, basado en Firefox, y a veces se me complica en Chrome. Por seguridad y comodidad de los visitantes finales, quisiera usar HTML5. Mi consulta es: ¿Es estrictamente necesario hacerlo, o dejo el Flash que está ahora? Quisiera insertar un streaming Shoutcast V1(http://s6.myradiostream.com:13250/) en un reproductor que corra sin problemas en la mayoría de los navegadores. Si te sirve de algo está el resumen de la PC que estoy usando aquí: https://drive.google.com/file/d/0B72AeKvUypKsVC1JZ09jZnMtTlU/view?usp=sharing
Te invito a dar una vuelta por mi sitio. Todo consejo será bienvenido. Desde ya muchísimas gracias.

Víctor Cuervo

Víctor Cuervo

Buenas,

Lo ideal es que vayas dejando el Flash y lo migres a HTML5 ya que tarde o temprano se abandonará el soporte de Flash.
Si tienes el streaming en myradiostream.com he visto que tienen ya players en HTML5 (http://myradiostream.com/tools/web-players.php). Yo utilizaría uno de esos.

Espero haberte orientado.

Saludos.

Víctor Cuervo

Dany Andersen

Gracias, Víctor. Había probado con diferentes códigos de terceros, pero no lograba una funcionalidad muy satisfactoria. Soy un aprendiz de novato con HTML, creo que por eso me costaba personalizar el player.
Estoy sumamente agradecido.

Víctor Cuervo

Will

y como podria hacer para que empiece solo con un boton de pause.. y cuando le den pause, el icono de pause sea de play para que siga reproduciendo??? gracias

Víctor Cuervo

Víctor Cuervo

@Will, lo que tienes que hacer es manejar el método play() y pause() sobre el audio.

Lo primero será meter el elemento audio:

<audio src="musica.mp3" controls></audio>

Y luego crear un botón:

<button id="boton">Play</button>

Ahora asociarle un evento para cuando se pulse arranque la canción y ponga el pause y al revés.

 var v = document.getElementsByTagName("audio")[0];
 var sound = false;
 
 var boton = document.getElementById("boton");
 boton.addEventListener("click", function(){
	if (!sound) {
		v.play();
		this.innerHTML = "Pause";
		sound = true;
		console.log(this);
	} else {
		v.pause();
		this.innerHTML = "Play";
		sound = false;
	}
 });

Espero que más o menos te oriente, intentaremos publicar un artículo sobre esto los próximos días.

Víctor Cuervo

willy

ese codigo no compila

Víctor Cuervo

David

Porque siempre me sale esto?
Error in gateway service: HtmlUpdateCheck
Entonces no me deja escucharla

Víctor Cuervo

Víctor Cuervo

@david, Qué raro. No encuentro ese error por ningún sitio. ¿Cuándo te lo lanza? ¿Por la consola Javascript?

Víctor Cuervo

www.informaticosadomicilio-sevilla.com

Nunca lo había pensado pero para algunas cosas nunca viene mal tener algún sonido en alguna opción de tu página web, así la haces más dinámica. Voy a probar tu consejo en alguna de las páginas web que estoy diseñando.

Víctor Cuervo

Diego

oye muchas gracias quisiera saber como hacer para que se reproduzca automáticamente apenas se abra la pagina

Víctor Cuervo

santi

Víctor Cuervo

Víctor Cuervo

Hola Diego,

Tienes que utilizar el atributo autoplay=»true». Lo tienes explicado en http://lineadecodigo.com/html5/musica-infinita-en-tu-web-con-html5/

Espero que te sirva. :-D

Víctor Cuervo

Rodrigo

Como ago para q continue la musica cuando entro a otra pagina…. ?

Víctor Cuervo

Víctor Cuervo

@Diseñador, Me alegro que te haya servido el artículo. :-D

Víctor Cuervo

Diseñador

Es justo la información que andaba buscando, gracias por el aporte. Un saludo.

Víctor Cuervo

Víctor Cuervo

@Diseño Web Perú,

Si, llego el declive del Flash y el auge de los estándares. :-D

Víctor Cuervo

Diseño Web Perú

Que genial poder reproducir musica con el HTML5 y no seguir dependiendo del flash para las paginas web

¿Algo que nos quieras comentar?

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

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.