La etiqueta Audio en HTML5

Una de las cosas más bellas que tiene HTML5 es el soporte nativo para medios, básicamente hablamos de las etiquetas <audio> para reproducir archivos de audio y <video> para reproducir archivos de video.

Anteriormente para poner un medio en un sitio web teníamos que “empotrarlo” con un <embed> o de plano hacer una película en flash. Desde hace ya algún tiempo el uso de flash ha caído en desuso, y básicamente lo usábamos para videos, pero ahora es muy sencillo reproducir video o audio desde un explorador web con HTML5.

Las diferencias entre ambas etiquetas, audio y video, es mínima, y básicamente es el nombre, así que en esta ocasión sólo veremos el uso de audio, y les recomiendo que ustedes mismo implementen la de video, después los invito a que me cuenten como les fué.

Cómo usar la etiqueta <audio> en HTML5

Su uso es bastante sencillo, simplemente agregaremos a nuestro código base…

Código :

<audio>
</audio>

Dentro de esta etiqueta agregaremos un texto que se desplegará si el explorador no soporta HTML5

Código :

<audio>
Tu explorador no soporta HTML 5, te recomiendo actualizarlo
</audio>

Ahora agreguemos un atributo en la etiqueta audio

Código :

<audio src="mimp3.mp3" preload autoplay controls loop>
Tu explorador no soporta HTML 5, te recomiendo actualizarlo
</audio>

Como pueden ver, tenemos los siguientes atributos:

• src: en el cual especificaremos el archivo a reproducir.
  
• preload: Este manda a cargar el audio antes de reproducirlo, de este modo al oprimir reproducir, no hay que esperar a que se cargue.
  
• autoplay: Como su nombre lo indica, el atributo autoplay en la etiqueta audio o video hace que el medio se reproduzca automáticamente, si habilitamos este atributo, no es necesario usar “preload”, de hecho su uso se vuelve redundante.
  
• controls: despliega los controles del medio, ya sea audio o video.
  
• loop: reproduce el audio o video continuamente.
  

Como notaron, hay atributos a los cuales no se les pone valor, estos por default si se escriben en el código tendrán un valor “true” y si no se escriben será “false” por lo cual en HTML 5 no es necesario escribir siempre el valor del atributo.

¿Qué exploradores soportan MP3 en HTML5 y cuales OGG?

Si estamos usando HTML5 debemos saber que no todos los navegadores soportan mp3 y no todos ogg.

Ni Firefox ni Opera soportan el formato mp3 por lo cual tendremos que trabajar extra y pasar nuestro archivo a ogg. El uso de wav ni siquiera lo vamos a discutir…

Pero… ¿Cómo pongo varios archivos en una sola etiqueta de audio HTML5?

Muy fácil, podemos tener varias fuentes de archivos de audio para la etiqueta audio en html5 esto ese hace con las etiquetas <source> de la siguiente manera.

Código :

<audio preload autoplay controls loop>
 <source src="mimp3.ogg" type="audio/ogg" />
 <source src="mimp3.mp3" type="audio/mpeg" />
Tu explorador no soporta HTML 5, te recomiendo actualizarlo
</audio>

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.