La etiqueta de audio <audio> en HTML5
julio 13, 2010 en Tips y codigos por Kalvin Manson
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:
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


Hola, y como haria para reproducir varias canciones con un mismo control? en html5? gracias.
Hola amigo Andres, aquí esta algo de lo que estas buscando
http://www.bionicworks.com/php/generate-a-playlist-for-html5-video
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)
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.