Dándole más caña, agregando sonido con HTML5 a animaciones jQuery
Este post viene a modificar el ejemplo anterior, es uno en donde ocupamos elementos HTML5 y Modernizr para cargar distintos polyfills para solucionar el problema de la compatibilidad.
Ahora, para darle un poco más “choreza” como decimos por acá, vamos agregar audio con HTML5. Ahora bien, no creo que mucha gente le interese escuchar el sonido a cada rato, pero bueno, es para fines demostrativos.
La modificación al ejemplo consistirá en dejar el formulario oculto y crear una especia de acordeón, de tal manera de ejecutar un sonido cuando se abra y cierre el acordeón.
Algo así:
 |
 |
|
Estado Cerrado (inicial)
|
Estado Abierto
|
En cada abrir y cerrar reproduciremos un sonido, el resultado es el del siguiente video:
Entonces manos a la obra, primero vamos a agregar los tags de audio
<audio id="abrir" preload="auto">
<source src="audio/abrir.mp3" type="audio/mpeg" />
<source src="audio/abrir.ogg" type="audio/ogg" />
</audio>
<audio id="cerrar" preload="auto">
<source src="audio/cerrar.ogg" type="audio/ogg" />
<source src="audio/cerrar.mp3" type="audio/mpeg" />
</audio>
Como vemos no es necesario mostrar los controles del tag audio, luego, mediante jQuery vamos a hacer play a esto controles.
Los archivos de audio mp3 y ogg los convertí desde wav mediante esta herramienta gratuita (cuidado con sus barras para IE instalables)http://www.koyotesoft.com/audio-software/free-mp3-wma-converter.html imagino que hay mucho mejores, pero fue lo primero que encontré. Entonces, en la carpeta audio agregamos los archivos y listo!
PD: Recuerda que no todos los navegadores soportan los mismos codec para reproducción de audio y video, por eso tenemos que agregar diferentes formatos para asegurar compatibilidad. Puedes ver el siguiente cuadro para tener el escenario con el que vas a tener que lidiar:
Ahora el código jQuery, muy simple para crear el efecto y puedes notar el atributo play para el tag audio con id abrir y el otro tag con el id cerrar:
$(document).ready(function(){
$("form").hide();
$("#texto").toggle(function(){
$("form").slideDown("slow");
$("#texto").html("- Cerrar");
$("#abrir")[0].play();
},function(){
$("form").slideUp("slow");
$("#texto").html("+ Abrir");
$("#cerrar")[0].play();
});
});
Y estamos ok, ya tenemos nuestro ejemplo balls breaker con sonido 
Espero que te sirva!
@chalalo