Web Audio API ABC

facebook-svg gplus-svg twitter-svg

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 . . )