Audio no es un medio tan popular como video en Internet. Podemos filmar un video con una cámara personal que generará millones de vistas en sitios web como www.youtube.com, pero crear un archivo de audio que obtenga el mismo resultado es prácticamente imposible. Sin Embargo, el audio se encuentra aún disponible, ganando su propio mercado en shows de radio y podcasts en toda la red.
HTML5 provee un nuevo elemento para reproducir audio en un documento HTML. El elemento, por supuesto, es <audio> y comparte casi las mismas características del elemento <video>.
Código 5-11. HTML básico para reproducir audio.
<!DOCTYPE html> <html lang="es"> <head> <title>Reproductor de Audio</title> </head> <body> <section id="reproductor"> <audio src=”http://minkbooks.com/content/beach.mp3” controls> </audio> </section> </body> </html>
El elemento <audio>
El elemento <audio> trabaja del mismo modo y comparte varios atributos con el elemento <video>:
- src : Este atributo especifica la URL del archivo a ser reproducido. Al igual que en el elemento <video> normalmente será reemplazado por el elemento <source> para ofrecer diferentes formatos de audio entre los que el navegador pueda elegir.
- controls : Este atributo activa la interface que cada navegador provee por defecto para controlar la reproducción del audio.
- autoplay : Cuando este atributo está presente, el audio comenzará a reproducirse automáticamente tan pronto como sea posible.
- loop : Si este atributo es especificado, el navegador reproducirá el audio una y otra vez de forma automática.
- preload : Este atributo puede tomar tres valores diferentes: none, metadata o auto. El primero indica que el audio no debería ser cacheado, normalmente con el propósito de minimizar tráfico innecesario. El segundo valor, metadata, recomendará al navegador obtener información sobre el medio (por ejemplo, la duración). El tercer valor, auto, es el valor configurado por defecto y le aconseja al navegador descargar el archivo tan pronto como sea posible.
Una vez más debemos hablar acerca de codificadores, y otra vez debemos decir que el Código 5-11 debería ser más que suficiente para reproducir audio en nuestro documento, pero no lo es. MP3 está bajo licencia comercial, por lo que no es soportado por navegadores como Firefox u Opera. Vorbis (el codificador de audio del contenedor OGG) es soportado por esos navegadores, pero no por Safari e Internet Explorer. Por esta razón, nuevamente debemos aprovechar el elemento <source> para proveer al menos dos formatos entre los cuales el navegador pueda elegir:
Código 5-12: dos fuentes para el mismo audio
<!DOCTYPE html> <html lang="es"> <head> <title>Reproductor de Audio</title> </head> <body> <section id="reproductor"> <audio id="medio" controls> <source src="http://minkbooks.com/content/beach.mp3"> <source src="http://minkbooks.com/content/beach.ogg"> </audio> </section> </body> </html>
El Código 5-12 reproducirá música en todos los navegadores utilizando los controles por defecto. Aquellos que no puedan reproducir MP3 reproducirán OGG y viceversa. Recuerde que MP3, al igual que MP4 para video, tienen uso restringido por licencias comerciales, por lo que solo podemos usarlos en circunstancias especiales, de acuerdo con lo determinado por cada licencia.
El soporte para los codificadores de audio libres y gratuitos (como Vorbis) se está expandiendo, pero llevará tiempo transformar este formato desconocido en un estándar.
Espero haber ayudado en algo. Hasta la próxima oportunidad!
Twittear
No hay comentarios:
Publicar un comentario