Hace un par de semanas vimos lo que el tag <video /> del HTML5 nos puede ofrecer. Hoy le toca al tag <audio /> 😀
El tag <audio />
Destinado para la inclusión directa mediante HTML de ficheros de audio en nuestras páginas web este tag, evitará que tengamos que usar reproductores creados el flash para que nuestros usuarios puedan escuchar sonidos, canciones, podcasts… directamente desde nuestra página web.
<audio src="music.oga" controls>
<a href="music.oga">Descargar canción</a>
</audio>Como podemos ver, además de delegar al navegador la reproducción del fichero, hacemos nuestro código más semántico aplicando una mayor claridad al elemento usado, mucho más que como lo estabamos haciendo hasta ahora:
<object type="application/x-shockwave-flash" data="player_mp3.swf" width="200" height="20">
<param name="movie" value="player_mp3.swf" />
<param name="FlashVars" value="mp3=music.mp3&showstop=1&showinfo=1" />
</object>Al ser un tag abierto (<audio></audio>) nos permite ofrecer un valor alternativo para los usuarios que no tienen disponible esta capacidad. En el primer ejemplo vemos como ofrecemos la posibilidad de descargar el fichero de audio music.oga en caso de que el navegador no reconozca el tag <audio />.
<audio src="music.oga" controls>
<object type="application/x-shockwave-flash" data="player_mp3.swf" width="200" height="20">
<param name="movie" value="player_mp3.swf" />
<param name="FlashVars" value="mp3=music.mp3&showstop=1&showinfo=1" />
</object>
</audio>Aprovechándonos de esta propiedad, podemos hacer una mezcla entre las dos técnicas para así acercar ambas técnicas a todos los usuarios. Eso sí, a costa de no validar nuestra página.
Manipulando el tag <audio />
Como todo elemento alojado en el DOM, el tag <audio /> nos permite interactucar con el mediante una serie de métodos Javascript comunes con todos los elementos y además dispone de una serie de métodos propios que nos permitirán manipular la ejecución de la reproducción.
// Accedemos al elemento
var audioElement = document.createElement('audio');
// Cambiamos de canción
audioElement.setAttribute('src', 'loading.ogg');
// Comenzamos la reproducción
audioElement.play();
// Definimos el elemento onload
audioElement.addEventListener("load", function() {
// Comenzamos la reproducción
audioElement.play();
// Mostramos la duración del archivo de sonido
$(".duration span").html(audioElement.duration);
// Mostramos el nombre del archivo de audio
$(".filename span").html(audioElement.src);
}, true);
// Ejecutamos el evento onload() del elemento
audioElement.load()
// Pausamos la ejecución
audioElement.pause();
// Definimos el volumen
audioElement.volume=0;
// Indicamos una posición de tiempo
audioElement.currentTime=35;
7 comentarios, 4 referencias
+
#