Esos efectos no son propios de la API de WebAudio. De hecho, lo que hace ese demo es obtener por AJAX
archivos wav
para combinarlos con el audio tomado del micrófono.
Los filtros que te provee la interface BiquadFilterNode son los siguientes:
- Low pass
- Band pass
- High pass
- All pass
- Low shelf
- High shelf
- Peaking
- Notch
Éstos son los efectos con los que puedes jugar. Ésta interface también tiene las propiedades:
Q
: indica la calidad del audio [0.001 - 1000]
frequency
: la frecuencia en Mhz
type
: tipo de filtro
Ejemplo
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
let audio = document.getElementById('stream');
let context = new AudioContext();
// necesario para Firefox. Si no añadimos el stream
// al objeto window, el microfono se detendrá pasados
// unos segundos
window.source = context.createMediaStreamSource(stream);
let destination = context.createMediaStreamDestination();
let filter = context.createBiquadFilter();
filter.type = 'highshelf';
filter.gain.value = 25;
filter.frequency.value = 60;
filter.Q.value = 50;
source.connect(filter);
filter.connect(destination);
audio.src = window.URL.createObjectURL(destination.stream);
})
.catch(error => {
console.error(error);
let output = document.getElementById('output');
output.textContent = error.name;
});
El método getUserMedia
recibe un objeto que nosotros le pasamos para indicar qué queremos transmitir, si audio
o video
o ambos. Este método nos devolverá una promesa con el stream
que se está capturando. A partir de aquí ya puedes manipularlo.
Por ejemplo, en el ejemplo de arriba he creado un stream
de mi micrófono, del cual creo un MediaStream
origen y destino por medio de AudioContext
y también un filtro con algunos valores por defecto.
Para que se aplique el filtro, debemos hacer que la fuente se conecte al filtro y éste al destino. Una vez hecho ésto, tenemos en el destino el audio con el filtro aplicado. Para probarlo, basta convertirlo a BLOB
y añadirlo a una etiqueta audio
, como hago en la última línea.
Demostración

Puedes ver la demo en vivo aquí.
Si mezclar las propiedades de BiquadFilterNode
no te satisface, puedes usar la librería Tuna, la cual te provee de varios efectos. Es en realidad un decorador para AudioContext
.
Por ejemplo:
let tuna = new Tuna(context);
// necesario para Firefox. Si no añadimos el stream
// al objeto window, el microfono se detendrá pasados
// unos segundos
window.source = context.createMediaStreamSource(stream);
let destination = context.createMediaStreamDestination();
var effect = new tuna.Cabinet({
makeupGain: 1, //0 to 20
impulsePath: "telephone.wav", // tu impulsador de audio
bypass: 0
});
source.connect(effect);
effect.connect(destination);
audio.src = window.URL.createObjectURL(destination.stream);