El nuevo elemento audio nos permite incrustar audio en una página web sin la necesidad de utilizar plugins adicionales como el Flash. Ya no es necesario depender de plugins de terceros, la reproducción de audio está soportada de forma nativa en los navegadores modernos, incluyendo los navegadores de muchos dispositivos móviles.
Un ejemplo básico de inserción de audio en nuestra página web podría ser el siguiente.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Audio</title>
</head>
<body>
<audio src="musica.mp3"></audio>
</body>
</html>
En el ejemplo, se ha añadido el atributo "controls", de lo contrario no se mostraría nada en la página al usuario. El código es muy sencillo pero todavía existen algunos problemas con el elemento audio. El tipo de fichero utilizado ha de ser soportado de forma nativa por el navegador. En la siguiente tabla puedes ver un pequeño resumen:
| Navegador | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer 9+ | SI | NO | NO |
| Chrome 6+ | SI | SI | SI |
| Firefox 3.6+ | NO | SI | SI |
| Safari 5+ | SI | SI | NO |
| Opera 10+ | NO | SI | SI |
Hay otros codecs de audio pero yo me centraría principalmente en Ogg Vorbis (.ogg) y MP3 (.mp3). También se puede considerar el WAV (.wav), pero su tamaño no lo hace muy apropiado para la reproducción en la web.
Si deseas lograr una reproducción de audio soportada en todos los navegadores modernos. Puedes utilizar el elemento de "source" para indicar los diferentes archivos de audio, y el navegador escogerá uno que pueda reproducir.
<audio controls>
<source src="musica.mp3" type="audio/mpeg" />
<source src="musica.ogg" type="audio/ogg" />
</audio>
El elemento audio no necesita atributos de altura o anchura porque, por defecto, cada navegador tiene su propio reproductor. Aún así puedes definir la altura y la anchura mediante CSS.
Se puede escribir código adicional para aquellos navegadores que no puedan reproducir audio de forma nativa. Por ejemplo Internet Explorer 6,7 y 8. En el artículo "Getting HTML5 Audio tag and flash fallback to work nicely with all browsers" ofrecen una solución que parece funcionar con todos los navegadores. El siguiente ejemplo utiliza el Standalone Flash WPAudioPlayer para realizar el fallback.
<audio id="audioplayer" controls>
<source src="http://www.webintenta.com/musica.mp3" type="audio/mpeg" />
<source src="http://www.webintenta.com/musica.ogg" type="audio/ogg" />
</audio>
<script type="text/javascript">
var audioTag = document.createElement('audio');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")) && ("no" != audioTag.canPlayType("audio/ogg")) && ("" != audioTag.canPlayType("audio/ogg"))))
{
AudioPlayer.embed("audioplayer", {soundFile: "musica.mp3"});
}
</script>
En primer lugar, se coloca el elemento audio en la página con el id="audioplayer". A continuación, se ejecuta javascript para comprobar algunas cosas y si alguno de ellas falla, sustituye el elemento por el Flash Player.
El atributo preload
Si tienes un archivo grande o estás seguro que el usuario va a querer escuchar el audio que se ha incrustado, puede hacer que el navegador comience a descargar el archivo al cargar la página. El atributo preload tiene tres valores posibles:
preload="auto"
auto, o simplemente escribiendo preload, se le indica al navegador que descargue el fichero de audio cuando la página cargue.
preload="none"
Indica al navegador que no descargue el audio. Sólo cuando el usuario inicialice la reproducción éste comenzará a descargarlo.
preload="metadata"
Se recibe la información (metadata) acerca de la pista de audio, incluyendo la duración. La descarga no se iniciará hasta que el usuario comience la reproducción.
El atributo loop
Si se indica este atributo, cuando el fichero de audio termine de reproducirse, este comenzará desde el principio otra vez. El atributo loop es un atributo booleano y puede ser establecido de las siguientes formas:
<audio loop>
<audio loop="loop">
<audio loop="">
El atributo autoplay
Otro atributo booleano, en este caso fuerza al navegador a comenzar a descargar y ejecutar el audio en cuanto la página carga.
El atributo controls
El atributo de controls agrega los controles específicos del navegador al archivo de audio, que incluyen botón de Play/Pause, información acerca de la duración/tiempo-escuchado, controles de volumen,...
<audio controls>
...
</audio>
Es un atributo booleano y se puede añadir de las siguientes formas:
<audio controls>
<audio controls="controls">
<audio controls="">
via webintenta http://webintenta.com/audio-con-html5.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%253A+webintenta%252FWVpB+%2528Intenta%2529
Comentaris
Publica un comentari a l'entrada