Nodos de ganancia
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">▷</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.