Tupale

La etiqueta de audio

Actualmente me encuentro desarrollando un experimento en HTML5, basado en un charla del Campus Party, pero de eso no voy a hablar ahora sino de la etiqueta <audio, una de las novedades de HTML5 que permite reproducir archivos de sonido en diferentes formatos sin necesidad de un plugin como adobe flashplayer  o quik time player.

Bueno pues, la sintaxis es muy sencilla, al igual que la mayoria de etiquetas tradicionales de HTML esta simplemente tiene una etiqueta de apertura, una etiqueta de cierre y una serie de propiedades que se agregan entre las etiquetas o dentro de la etiqueta de apertura. Veamos el ejemplo:

<audio src=”musica.mp3″ controls=”controls”>
<a href=”musica.mp3″>Tu navegador no soporta esta funcion</a>
</audio>

ejemplo:

Infografia del nuevo HTML5

Infografia del nuevo HTML5

En el ejemplo anterior podemos ver la simplicidad de la etiqueta y el modo simple de uso, ademas se puede ver que automáticamente puedes definir los objetos a mostrar en caso que el navegador no soporte esta propiedad de HTML5. De la misma manera que definimos imágenes  utilizamos “src” para determinar la ruta del archivo que queremos reproducir y la etiqueta controls=”controls” la utilizamos para definir si el reproductor mostrara los controles básicos de reproducción del archivo de audio (play, pause, stop, linea de tiempo y volumen), aunque esto varia según el navegador.

Hasta aquí, en apariencia la etiqueta de audio de HTML5 funciona perfecto, pero debo mostrarles el primer gran error, al parecer los navegadores se han puesto de acuerdo para tomar por dos caminos distintos en cuanto a reproduccion de formatos.

Aquí esta la tabla de soporte de formatos:

Formato	IE 8	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg	No	Si		Si		Si		No
MP3	No	No		No		Si		Si
Wav	No	Si		Si		No		Si

Como ven es un verdadero lió, por suerte podemos intentar reproducir dos archivos diferentes para que dependiendo del navegador al menos uno responda.

<audio controls=”controls”>
<source src=”cancion.ogg” type=”audio/ogg” />
<source src=”cancion.mp3″ type=”audio/mpeg” />
Tu navegador no soporta esta caracteristica
</audio>

No es mucho pero ya es un principio para manejar la etiqueta de audio de html5

4 comments for “La etiqueta de audio

  1. Andres
    15 mayo, 2011 at 3:15 AM

    Hola, y como haria para reproducir varias canciones con un mismo control? en html5? gracias.

  2. 7 agosto, 2011 at 9:43 PM

    Hola compañero,

    sabrías como puedo hacer para saber si el usuario acepta la etiqueta audio ? por que si no agrego el reproductor viejo (si el usuario no lo acepta)

    • 8 agosto, 2011 at 8:11 PM

      tal como se muestra en el post todo lo que este incluido dentro de la etiqueta se mostrara en caso de que el navegador no soporte el tag audio.

Deja un comentario

A %d blogueros les gusta esto: