Web Audio API ABC
El AudioContext()
Exactamente como en el caso de canvas, para trabajar con el Web Audio API, primero tenemos que crear un objeto AudioContext()
.
var audioCtx = new AudioContext();
El problema es que esto no funciona en Safari y versiones antiguas de Opera y Chrome. Si queremos obtener resultados compatibles con estos navegadores, tenemos que utilizar el prefijo webkit
de esta manera:
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
El objeto AudioContext
reúne un conjunto de propiedades y métodos que podemos utilizar para crear y manipular nodos audio.
Crear un sencillo oscilador
Primero creamos el contexto audio:
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
A continuación creamos un oscilador utilizando el método createOscillator()
.
var oscilador = audioCtx.createOscillator();
Establecemos la frecuencia de oscilación en hertzios. El valor por defecto es de 440 hz.
oscilador.frequency.value = 250;
También establecemos el formato de onda ( oscilador.type
), que puede ser:
- sinusoidal ("sine
"),
- cuadrado ("square"
),
- diente de sierra ("sawtooth"
),
- triangular ("triangle"
) o
- "a medida" ("custom"
).
El valor por defecto es "sine"
.
oscilador.type = "triangle";
Conectamos el oscilador con el dispositivo de destino ( altavoces, auriculares . . . etc ). Para esto utilizamos el método connect()
.
oscilador.connect(audioCtx.destination);
Iniciamos el oscilador utilizando el método start()
.
oscilador.start(audioCtx.currentTime);
La propiedad currentTime
del AudioContext
devuelve una marca de tiempo ( timestamp ) en segundos, útil para programar eventos, como por ejemplo parar el oscilator despues de 3 segundos.
oscilador.stop(audioCtx.currentTime + 3);
Podemos utilizar la propiedad onended
del oscilador para crear un controlador del evento ( event handler ) que se dispara al acabarse la oscilación. En este caso solo sacamos un mensaje en consola.
oscilador.onended = function(){console.log("Y por fin el silencio. . .")};
Importante: cuando el oscilador se detiene utilizando el método stop()
, ya no puede ser reiniciado.
Vea este ejemplo en codepen
See the Pen AudioContext - Un sencillo oscilador* by Gabi (@enxaneta) on CodePen.
Grafos y nodos
En matemáticas y ciencias de la computación, un grafo es un conjunto de objetos llamados nodos, unidos por enlaces llamados aristas, que permiten representar relaciones binarias entre los elementos de un conjunto.
El oscilador del ejemplo anterior es un nodo y lo podemos conectar con otros nodos, o sea otros objetos audio, utilizando el método connect()
.
El siguiente ejemplo es una demostración de cómo conectar el oscilador del ejemplo anterior con un filtro biquad.
oscilador.connect(filtro); filtro.connect(audioCtx.destination);
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// crea un oscilador
var oscilador  = audioCtx.createOscillator();
// crea un filtro biquad
var filtro = audioCtx.createBiquadFilter();
// Manipula el oscilador
oscilador.frequency.value = 250;
oscilador.type = "triangle";
// Manipula el filtro
filtro.type = "lowshelf";
filtro.frequency.value = 100;
// conecta el oscilador con el filtro
oscilador.connect(filtro);
// conecta el filtro con el dispositivo de destino ( altavoces, auriculares . . . etc. )
filtro.connect(audioCtx.destination);
// inicia el oscilador
oscilador.start(audioCtx.currentTime);
// para el oscilador después de 3 segundos
oscilador.stop(audioCtx.currentTime + 3);
oscilador.onended = function(){console.log("Y por fin el silencio")};
Vea este ejemplo en codepen
See the Pen AudioContext - Un sencillo oscilador + filtro* by Gabi (@enxaneta) on CodePen.
Aunque el resultado de este ejemplo no es muy interesante, es importante recordar el proceso utilizado, que será siempre lo mismo:
1. Primero creamos un nuevo AudioContext.
2. A continuación creamos una fuente de reproducción – en este caso un oscilador, pero puede ser también un archivo de sonido o incluso el audio de un micrófono.
3. Conectamos la fuente de reproducción con otros nodos audio ( analyser, distortion, biquadFilter, convolver, gainNode ).
4. Finalmente conectamos con el dispositivo de destino (altavoces, auriculares . . )