Poner música en tu web con HTML5

16/May/2012 HTML5 , 17 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:

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

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

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

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

Así ya tendremos el reproductor que nos permita poner la música en nuestra web con HTML5AUDIO de HTML5

  • 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
  • 17 comentarios en “Poner música en tu web con HTML5”

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

    Víctor Cuervo

    Víctor Cuervo

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

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

    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

    Responder a Diseño Web Perú Cancelar respuesta

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

    *

    *