Audio y video son dos características sobrasalientes de HTML5 (del cual ya dimos un primer pantallazo en este post). Hoy vamos a aprender a implementar esta etiqueta y a hacerla compatible con todos los navegadores modernos (Que puedes mirarlos aquí).
Cada navegador utiliza un motor de renderizado. Para definirlos brevemente digamos que es el encargado de dibujar en el navegador lo que especifica el código (HTML + CSS), en este caso, la implementación del control audio.
Estos son los navegadores más importantes hoy en día y los nombres de sus respectivos motores de render:
Cada uno de estos motores implementa la etiqueta audio de manera distinta: los códecs que utiliza para reproducir el sonido es diferente en cada uno y cada cual apoya el que considera necesario (Es una pelea muy fuerte, tengamos en cuenta que empresas como Microsoft, Google, Apple y Mozilla Foundation están detrás de cada navegador).
Quieren que sea más claro? El ejemplo de código que vimos arriba NO FUNCIONA EN TODOS LOS NAVEGADORES (Sólo lo haría en IE9 o superior y en Chrome).
Por lo que es necesario modificar levemente nuestro código inicial para modificar el atributo src e indicarle a cada navegador que audio utilizar y con que códec reproducirlo.
Con este código estamos seguros que nuestro audio podrá oirse en todos los navegadores modernos. Aquellos que no implementen esta característica del estándar simplemente mostrarán: "Tu navegador no soporta audio HTML5".
Como pueden ver no cambió mucho, solo aislamos el atributo src a un tag dentro de audio y lo configuramos de acuerdo a nuestras necesidades.
Pueden ver la documentación oficial del tag audio en HTML5 en este enlace.
Primer enfoque
El tag <audio> implementa audio en los navegadores sin necesidad de algún plugin (Flash por ejemplo). Es muy fácil de usar. Vamos a ver un ejemplo básico:
Tranquilos, estamos empezando, vamos a analizar nuestro código:
- width y height: configuran el ancho y alto del reproductor.
- src: indica la ruta donde está alojada la canción. Igual que con el tag <img>.
- controls: indica al navegador que muestre los controles mínimos para el manejo visual por parte del usuario (Play/Pause, Seek bar y volúmen).
- autoplay: indica al navegador si el audio iniciará su reproducción automáticamente cuando la página haya sido descargada.
- preload: especifica si el audio se descarga con la página, sólo su metadata o cuando el usuario de play.
Compatibilidad
Ahora que ya conocemos la implementación básica de esta etiqueta hablemos un poco de compatibilidad entre los navegadores.Cada navegador utiliza un motor de renderizado. Para definirlos brevemente digamos que es el encargado de dibujar en el navegador lo que especifica el código (HTML + CSS), en este caso, la implementación del control audio.
Estos son los navegadores más importantes hoy en día y los nombres de sus respectivos motores de render:
- Chrome: webkit (Hoy en día están desarrollando Blink, su propio motor de render).
- Mozilla: gecko.
- Safari: webkit.
- Opera: presto.
- IE: trident.
Cada uno de estos motores implementa la etiqueta audio de manera distinta: los códecs que utiliza para reproducir el sonido es diferente en cada uno y cada cual apoya el que considera necesario (Es una pelea muy fuerte, tengamos en cuenta que empresas como Microsoft, Google, Apple y Mozilla Foundation están detrás de cada navegador).
Quieren que sea más claro? El ejemplo de código que vimos arriba NO FUNCIONA EN TODOS LOS NAVEGADORES (Sólo lo haría en IE9 o superior y en Chrome).
Por lo que es necesario modificar levemente nuestro código inicial para modificar el atributo src e indicarle a cada navegador que audio utilizar y con que códec reproducirlo.
Con este código estamos seguros que nuestro audio podrá oirse en todos los navegadores modernos. Aquellos que no implementen esta característica del estándar simplemente mostrarán: "Tu navegador no soporta audio HTML5".
Como pueden ver no cambió mucho, solo aislamos el atributo src a un tag dentro de audio y lo configuramos de acuerdo a nuestras necesidades.
Pueden ver la documentación oficial del tag audio en HTML5 en este enlace.
Twittear Seguir a @3p_ar
