Efectos audio
Podemos utilizar efectos de sonido para mejorar algunas animaciones. Por ejemplo en esta animación ( lanzar la pelota ) podemos utilizar un efecto de sonido en el momento en el cual la pelota toca las "paredes", o sea: el borde del canvas
. La intensidad del sonido depende de la velocidad de la pelota en el momento del impacto.
El sonido
El archivo de sonido utilizado proviene de Openair, una libreria donde podemos encontrar varios sonidos listos para descargar.
El javascript utilizado para reproducir el audio es muy similar al javascript de un ejemplo anterior: Nodos de ganancia, donde encontrará la explicación del código.
Primero tenemos que solicitar el audio utilizando XMLHttpRequest
:
var request = new XMLHttpRequest();
request.open("GET",url,true);
request.responseType = "arraybuffer";
request.onload = function() {
audioCtx.decodeAudioData(request.response, function(buffer) {
audioBuffer = buffer;
});
};
request.send();
La función reproducirAudio()
queda casi sin cambiar, solo que ahora toma como argumento el volumen. Esto es importante porque el volumen del audio varía en función de la velocidad de la pelota.
function reproducirAudio(elVolumen){
var fuenteDeReproduccion = audioCtx.createBufferSource();
fuenteDeReproduccion.buffer = audioBuffer;
fuenteDeReproduccion.playbackRate.value = .75;
var gain = audioCtx.createGain();
gain.gain.value = elVolumen; // ajusta el volumen del sonido
fuenteDeReproduccion.connect(gain);
gain.connect(audioCtx.destination);
fuenteDeReproduccion.start(audioCtx.currentTime);
}
Vea el código en codepen.
Para la explicación detallada del código, por favor consulte este artículo: Nodos de ganancia
Descomente la última línea de código para probar el script.
See the Pen SOUND* by Gabi (@enxaneta) on CodePen.
La pelota
El JavaScript para lanzar la pelota es muy parecido al de otro ejemplo anterior ( Lanzar la pelota ) solo que en este caso he modificado la función colizionarParedes
, que controla el comportamiento de la pelota al colisionar contra las paredes. Ahora también llama la función reproducirAudio
si hay impacto.
Pelota.prototype.colisionParedes = function() { var silenciar = 20; // impacto a la derecha if (this.x > cw - this.r) { this.x = cw - this.r; this.vx *= rebote; reproducirAudio(this.vx / silenciar); } // impacto a la izquierda else if (this.x < this.r) { this.x = this.r; this.vx *= rebote; reproducirAudio(this.vx / silenciar); } // impacto abajo if (this.y > ch - this.r) { this.y = ch - this.r; this.vy *= rebote; if(Math.abs(this.vy) > 1) {reproducirAudio(this.vy/ silenciar);} } // impacto arriba else if (this.y < this.r) { this.y = this.r; this.vy *= rebote; reproducirAudio(this.vy / silenciar); } };
Vea este ejemplo en codepen:
Para la explicación detallada del código, por favor consulte estos artículos:
Lanzar la pelota y Nodos de ganancia
See the Pen Lanzar la pelota con efectos audio by Gabi (@enxaneta) on CodePen.