Día #11 Hablemos de la etiqueta Audio en HTML5

audio html5

Añadir sonido o archivos de audio a nuestras páginas web suele ser muy importante para algunos proyectos en especifico, pero resultaba un poco incomodo que dichos archivos de audios solo eran reproducido si el navegador en cuestión tenia instalado algún plugin (por ejemplo flash).

Por suerte ahora en HTML5 contamos con una nueva etiqueta o un nuevo elemento que especifica un estándar para incluir archivos de audio en nuestras páginas web sin necesidad de plugins que hagan este trabajo.

Se trata de la etiqueta <audio> y en este tutorial vamos a hablar de ella, sus atributos y ajustes y compatibilidad con los diferentes navegadores web.

Esta etique funciona igual a su hermano la etiqueta video, claro con diferentes formatos, pero su estructura es parecida.

Para reproducir un archivo de audio en HTML 5 bastaria con abrir la etiqueta audio colocarle le fuente por medio de src que nos dice la ubicacion del archivo y cerramos la etiqueta audio, el código básico que necesitaremos es el siguiente:

1 – Multiples Fuentes para la etiqueta audio

Al igual que la etiqueta de video y de los diferentes formatos, aca en audio tenemos que especificar lo mismo, multiples formatos ya que no hay una definida que implemente todos los navegadores. Para esto vamos a utilizar estos formatos WAV, Ogg Vorbis y MP3.

De esta forma triplicamos el espacio preparado para el archivo pero garantizamos su perfecta compatibilidad.

A continuacion te presento una tabla con los diferentes principales navegadores y sus archivos de audios soportados:

formato-audio-navegadores

Nota: IExplorer 8 y las versiones anteriores no soportan la etiqueta audio.

2 – Atributos de la etiqueta audio

La etiqueta audio en HTML5 cuenta con varios atributos para ampliar su funcionamiento, vamos a ver cuales son:

* atributo autoplay: Bueno este atributo booleano es bastante intuitivo, lo que básicamente hace es cargar y ejecutar el sonido cuando cargue la pagina.

* atributo controls: Lo que hace este atributo booleano es hacer que el reproductor de audio de cada navegador muestre los respectivos controles de: reproducir, pausa, volumen etc… esta sería la forma de utilizarlo:

Hay que tener en cuenta las diferentes formas de mostrase el reproductor en los diferentes navegadores, recuerda que no son iguales y que podemos ajustarlos con css. Estos son los reproductores en los principales navegadores:

reproductores de los navegadores

*atributo loop: Otro atributo booleano, que indica que el audio es ser repetido continuamente, es decir que funcione como bucle, se termina y vuelve a comenzar.

*atributo preload: empezará a precargar el video independientemente de las acciones del usuario sobre el player. al igual que en la etiqueta video este atributo generalmente no es utilizado, esta atributo tiene tres parametros: auto, metadata y none.

auto: el navegador debe cargar todo el audio cuando se carga la página
metadata:
el navegador debe cargar los metadatos sólo cuando se carga la página
none:
informa al navegador que no hay necesidad de realizar la precarga.

*atributo src: Este atributo src especifica la ubicación (URL) del archivo de audio, ya sea una url interna o externa.

Este atributo src tiene un atributo que es type, que especifica los recurso de los medios de comunicación.

una forma correcta para utilizar este atributo es asi:

—————————————————————————————-

Para saber mas de la etiqueta video ve a esta pagina: http://www.w3schools.com/html5/tag_audio.asp

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo