Efectos audio

facebook-svg gplus-svg twitter-svg

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.