Nodos de ganancia

facebook-svg gplus-svg twitter-svg

Nodos de ganancia

Los nodos de ganancia ( gain nodes ) son nodos audio que permiten ajustar el volumen del sonido. Podemos crear un nodo de ganancia utilizando el método createGain().

var gain = audioCtx.createGain();

A continuación : un ejemplo muy fácil en el cual voy a crear un oscilador cuyo volumen inicial es 0, o sea está silenciado:

gain.gain.value = 0;

En el HTML hay un control deslizante ( input type range ) que puede ser utilizado para ajustar el volumen del sonido entre 0 y 2.

<input id="volumen" type="range" step=.001 max="2" value = "0" />

En el JavaScript, primero creamos el oscilador utilizando el método createOscillator(). Establecemos algunas propiedades y lo iniciamos utilizando el método start().

var oscilador = audioCtx.createOscillator();
    oscilador.type = "sawtooth";
    oscilador.frequency.value = 100;
    oscilador.start(audioCtx.currentTime);

También creamos un nodo de ganancia utilizando el método createGain().

var gain = audioCtx.createGain();
    gain.gain.value = 0;// ajusta el volumen del sonido

Conectamos el oscilador al nodo de ganancia, y el nodo de ganancia al dispositivo de destino utilizando el método connect().

oscilador.connect(gain);
gain.connect(audioCtx.destination);

Finalmente utilizamos el método addEventListener para detectar el cambio de valor del slider, y lo utilizamos para establecer el valor del gain.

volumen.addEventListener("input",function(){
	gain.gain.value = this.value;
    }, false)

Vea este ejemplo en codepen:

See the Pen nodos de ganancia #1* by Gabi (@enxaneta) on CodePen.

Ajustar el volumen de un archivo de sonido

Podemos hacer lo mismo con un archivo de sonido. A continuación veremos como ajustar el volumen del audio de este ejemplo.

Habrá que hacer algunos cambios.

El HTML

En el HTML necesitamos, además del botón, un un control deslizante ( input type range ) para ajustar el volumen del sonido entre 0 y 2.

  <p>
    <button id="boton">&#9655;</button>
    <input id="volumen" type="range" value=".5" max ="2" step="0.01"  />
  </p>

El JavaScript

En el javascript vamos a necesitar una nueva variable global para el nodo de ganancia ( gain ) y otra para el volumen ( elVolumen ).

var audioBuffer, fuenteDeReproduccion, gain;
. . . . . . . . . . . 
var elVolumen = .5;

Además tenemos que modificar la función reproducirAudio() de esta manera:
Después de crear la fuente de reproducción tenemos que crear el nodo de ganancia.

gain = audioCtx.createGain();

También ajustamos el volumen del sonido.

gain.gain.value = elVolumen;

Y conectamos la fuente de reproducción con el nodo de ganancia ( gain ), y el nodo de ganancia con el dispositivo de destino ( altavoces, auriculares . . . etc )

fuenteDeReproduccion.connect(gain);
gain.connect(audioCtx.destination);
function reproducirAudio() {
      fuenteDeReproduccion = audioCtx.createBufferSource();
      // Crea un nuevo nodo de ganancia y ajusta el volumen del sonido
      gain = audioCtx.createGain();
      gain.gain.value = elVolumen;
      fuenteDeReproduccion.buffer = audioBuffer;

      fuenteDeReproduccion.connect(audioCtx.destination);

      // Conecta la fuente de reproducción con el nodo de ganancia
      fuenteDeReproduccion.connect(gain);
      // Conecta el nodo de ganancia con el dispositivo de destino
      gain.connect(audioCtx.destination);
  
      fuenteDeReproduccion.start(audioCtx.currentTime);
}

Por último, exactamente como en el ejemplo anterior,  utilizamos el método addEventListener para detectar el cambio de valor del slider, y lo utilizamos para establecer el valor del gain.

volumen.addEventListener("input", function(){
  elVolumen = this.value; // guarda el valor del slider en una variable global
  gain.gain.value = elVolumen; // ajusta el volumen del sonido
}, false);

Vea este ejemplo en codepen.
Pruebe arrastrar el botón del slider para ajustar el volumen del sonido.

See the Pen Nodos de ganancia #2* by Gabi (@enxaneta) on CodePen.