La etiqueta AUDIO en HTML5

Las famosas etiquetas “audio” y “video”, como podréis adivinar, nos permiten reproducir multimedia sin necesidad de instalar plugins adicionales al navegador o a nuestro ordenador.

las  etiquetas de audio y vídeo

Ahora el navegador haría todo el trabajo, no dependería de nadie. Ni de Flash Player.

Vamos a aprender el uso básico de la etiqueta “audio” en HTML5, comprender cómo funciona y darnos una visión de todo lo que podemos hacer con ella.

Uso de la etiqueta AUDIO

Implementarla es muy sencillo:

1 <audio src="mi_archivo_de_audio.mp3" preload autoplay controls loop>
2 Tu explorador no soporta HTML5, ¡ACTUALIZA!
3 </audio>

Expliquemos un poco para qué sirven los atributos:

SRC: Nos enlaza el archivo de audio que queremos reproducir.
CONTROLS: Nos permite implementar los controles del reproductor por defecto del navegador (play, pause, volumen…)
AUTOPLAY: Nos permite reproducir el archivo de audio desde que se carga la página.
PRELOAD: Nos carga un poco el archivo de audio antes de iniciar la reproducción en el buffer para impedir que se nos corte.
LOOP: Reproduce el audio y al terminar vuelve a reproducirlo desde el principio.

Mp3 vs Ogg

No iba a ser todo tan sencillo, ya que no todos los navegadores soportan mp3 y no todos ogg.

Ni Firefox ni Opera soportan el formato mp3 por lo cual tendremos que pasar nuestro archivo a ogg.

¿Cómo hacemos esto en nuestro código?, muy fácil:

1 <audio preload autoplay controls loop>
2 <source src="mi_archivo_mp3.mp3" type="audio/mpeg" />
3 <source src="mi_archivo_ogg.ogg" type="audio/ogg" />
4 Tu explorador no soporta HTML5, ¡ACTUALIZA!
5 </audio>

Con esto cada navegador ya se encarga de coger su archivo compatible y reproducirlo.

No pensemos que esto sigue en pruebas porque es MENTIRA. Empezad a codear ya con estas etiquetas y en HTML5, porque la web también evoluciona y no hay necesidad de seguir con tecnologías de hace 10 años.

Fuente: Booleanos