En la actualidad (y desde hace ya bastante tiempo) insertar audio y vídeo en las páginas web es muy común, banal, y la mayoría de los internautas ya no les prestan atención. Pero, técnicamente, es otra historia. Como usted sabe, los navegadores web solo saben interpretar y, por lo tanto, mostrar, el texto, las imágenes estáticas (con los formatos .gif, .jpg y .png), las imágenes animadas (con formato .gif animado) y JavaScript. Si los sacamos de ahí, los navegadores se vuelven sordomudos. Para todo lo que sea contenido multimedia e interactivo será necesario añadir obligatoriamente un motor de interpretación en el navegador, para que pueda publicar aquellos elementos que no sepa interpretar de forma nativa. Se trata de los famosos plugins. El gran vencedor fue Flash, una tecnología propietaria de Adobe que permite insertar animaciones interactivas, así como audio y vídeo, con un único plugin: FlashPlayer.
HTML5 ha revolucionado el panorama al introducir los elementos audio y vídeo. Esos dos nuevos elementos permiten insertar archivos multimedia "casi" de forma nativa, sin necesidad de añadir plugins propietarios.
Evitar un plugin siempre es de agradecer. Los plugins son siempre una fuente de problemas: código de inserción HTML pesado, inestabilidad, brechas de seguridad, problemas con la versión, bloqueo de la instalación...
Sin embargo, la revolución del HTML5 no va a acabar con todo lo que ya existe de la noche a la mañana. Todavía nos encontramos con muchos problemas a la hora de usar elementos multimedia en HTML5: problemas de formato de audio y vídeo, problemas de protección de los originales (DRM), problemas de compatibilidad con los distintos navegadores, interacción con el usuario...
1. El elemento audio
Insertar un archivo de audio (un simple sonido, una canción, una entrevista, un podcast...) es muy sencillo: para eso tenemos el elemento audio.
Su atributo indisociable es src, que sirve para indicar la ruta de acceso al archivo de la fuente de audio.
Esta sería la sintaxis básica:
<audio src="musica.ogg"></audio>
2. Los controles de audio
Ahora, debemos permitir que el usuario pueda controlar el audio: que pueda iniciarlo, ponerlo en pausa o pararlo.
En el elemento audio, simplemente habrá que utilizar el atributo boleano controls para que se inserte la barra de control nativa del navegador.
<audio src="musica.ogg" controls></audio>
3. La apariencia del reproductor de audio
Como es habitual, la apariencia del lector de audio dependerá del navegador:
Este es el reproductor de audio de Opera 12:
Este es el reproductor de audio de Chrome 29:
Este es el reproductor de audio de Internet Explorer 10:
Este es el reproductor de audio de Safari 6:
Este es el reproductor de audio de Firefox 23:
4. Los atributos para el audio
Con el elemento audio podrá utilizar estos atributos:
- autoplay: este atributo boleano inicia la lectura del archivo de audio en cuanto se encuentre disponible, al cargarse la página web. En mi humilde opinión, no es muy acertado utilizarlo, ya que es preferible que sea el propio usuario quien decida si quiere escuchar o no dicho archivo de audio.
- loop: este atributo boleano permite reproducir el sonido en bucle. De nuevo, no resulta muy ergonómico.
- preload: indica al navegador que deberá cargar el archivo de audio cuando cargue la página web, de modo que esté disponible para el usuario lo antes posible. Este atributo preload será ignorado si usa autoplay. El atributo preload acepta los valores auto (equivale a usar el atributo como si fuera boleano, es decir, sin especificar ningún valor), none (sin descarga) y metadata (para precargar los metadatos asociados al archivo). Tenga cuidado, si tiene que precargar varios archivos de audio, podría consumir demasiado ancho de banda.
Esta es una sintaxis completa (¡y antiergonómica!):
<audio src="musica.ogg" controls preload autoplay loop></audio>
5. Los formatos de audio
En la sintaxis del ejemplo anterior, he indicado de forma arbitraria un archivo de audio con el formato .ogg. Sin embargo, existen muchos otros formatos de audio, ¡y es ahí donde todo se complica! El W3C no indica de ninguna manera qué formato se debe usar para insertar un archivo de audio en una página web. Así que hay una especie de "guerra" de formatos de audio entre los navegadores.
Esta es la situación en el momento de redactar estas páginas (septiembre de 2013) en cuanto a la compatibilidad de los principales navegadores, en su última versión, con los diferentes formatos. En la siguiente tabla solamente he recogido los formatos de audio para la Web (.ogg, .mp3 y .acc) y he preferido dejar fuera los demás formatos que no se adaptan a la Web (.aiff, .wav, .au...). Debe saber que el formato WebM puede reproducir tanto audio, como vídeo (véase la sección Insertar vídeo - Los formatos de vídeo).
| ogg | mp3 | acc | |
|---|---|---|---|
| Internet Explorer | No | Sí | No |
| Chrome | Sí | Sí | Sí |
| Firefox | Sí | No | No |
| Safari | No | Sí | Sí |
| Opera | Sí | No | No |
Como puede ver, la conclusión es "simple": ¡no existe ningún formato de audio que sea compatible "universalmente" con los cinco navegadores principales del mercado!
Aún así, podemos encontrar rápidamente una solución para este problema: bastará con que indiquemos varios archivos de fuentes de audio que sean compatibles con los principales navegadores. Con los formatos .mp3 y .ogg estaremos abarcando los cinco navegadores principales del mercado.
Para indicar varios archivos de fuentes de audio, deberá usar el elemento source con su atributo src, en el elemento audio.
Esta es la sintaxis que debemos usar:
<audio>
<source src="musica.mp3">
<source src="musica.ogg">
</audio>
Los navegadores abrirán y reproducirán el primer archivo de audio que sepan interpretar.
Para el elemento source, puede añadir el atributo type, que permite indicar el tipo de archivo fuente y mejorar así la gestión de los archivos de audio por parte del navegador:
<audio>
<source src="musica.ogg" type="audio/ogg"/>
<source src="musica.mp3" type="audio/mpeg"/>
<source src="musica.acc" type="audio/acc"/>
</audio>
En el atributo type también puede indicar el codec utilizado:
<audio>
<source src="musica.ogg" type="audio/ogg ; codecs=’vorbis ’"/>
</audio>
6. Diseñe sus propios controles de audio
Acabamos de ver que cada navegador web utiliza su propia interfaz para mostrar los botones de control del audio. Usted podrá crear su propia interfaz con la API Audio utilizando JavaScript.
Esta sería la sintaxis:
<p>Melody GARDOT - Our love is easy</p>
<audio id="mimusica" src="Our-Love-Is-Easy.mp3"></audio>
<div>
<button onclick="document.getElementById(’mimusica’).play()">Play</button>
<button onclick="document.getElementById(’mimusica’).pause()">Pause</button>
<button onclick="document.getElementById(’mimusica’).volume+=0.1">
Subir el volumen</button>
<button onclick="document.getElementById(’mimusica’).volume-=0.1">
Bajar el volumen</button>
</div>
Claro está, no se ha usado el atributo controls, ya que queremos crear nuestros propios botones. El elemento audio está identificado de forma exclusiva con el atributo id="mimusica". Vamos a crear botones (button) que actúen sobre el elemento mimusica, empleando los métodos play() y pause(), y la propiedad volume.
No se le ha aplicado aún ningún estilo CSS, ahora usted podrá "decorarlo". Este es el resultado visual:
Si desea saber más sobre la API Audio, consulte la página web que le dedica el sitio web del W3C: http://www.w3.org/wiki/HTML/Elements/audio
7. Los antiguos navegadores
Aunque partimos del principio de que usted usa HTML5 sabiendo a lo que se expone en cuanto a la compatibilidad con los navegadores, vamos a indicar un mensaje de advertencia para los "antiguos" navegadores que no sean compatibles con el HTML5. Ese mensaje aparecerá en los antiguos navegadores, los cuales van a ignorar todos los elementos HTML5, y será ignorado por los navegadores compatibles.
<audio controls preload>
<source src="musica.mp3" type="audio/mpeg">
<source src="musica.ogg" type="audio/ogg">
Su navegador es demasiado antiguo para interpretar HTML5
</audio>
También podría insertar aquí una versión Flash de su archivo de audio
Espero haber ayudado en algo. Hasta la próxima oportunidad!
Twittear
No hay comentarios:
Publicar un comentario