A la manera moderna
La API de Web Audio usa la interfaz AudioContext() para administrar fuentes, filtros y destinos. Una vez que hayas creado un AudioContext() nuevo, crea un nodo de fuente de audio, como AudioBufferSourceNode o OscillatorNode. Como ejemplo, considera un oscilador básico con un filtro de paso bajo aplicado.
Usa el método createBiquadFilter()
Primero, crea una AudioContext() nueva. Luego, crea un nodo de fuente de audio, como AudioBufferSourceNode o OscillatorNode. En este ejemplo, crearás un nodo oscilador sine, que tiene una frecuencia de 420 hercios desde el momento en que comienza a reproducir.
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioCtx.createOscillator()
oscillator.type = 'sine';
// Value is in hertz.
oscillator.frequency.setValueAtTime(420, audioCtx.currentTime);
A continuación, crea un nodo de efecto con createBiquadFilter(). Establece el tipo en lowpass y la frecuencia para que comience un segundo después del inicio de la reproducción. Luego, conecta biquadFilter a oscillator.
const biquadFilter = audioCtx.createBiquadFilter();
biquadFilter.type = 'lowpass';
biquadFilter.frequency.setValueAtTime(200, audioCtx.currentTime + 1);
oscillator.connect(biquadFilter);
Por último, conecta biquadFilter al destino de audioCtx antes de iniciar el oscillator y detenerlo después de dos segundos de reproducción.
biquadFilter.connect(audioCtx.destination);
oscillator.start();
oscillator.stop(2);
El sonido del oscilador pasa por el filtro no afectado y llega al destino, que son las bocinas de la computadora. Después de un segundo de la reproducción, se aplica el filtro lowpass. Después de dos segundos, el oscilador se detiene.
Otros filtros y efectos disponibles
Se pueden agregar otros nodos de filtro a un AudioContext para crear diferentes efectos:
createWaveShaper()se usa para agregar distorsión a una fuente.createGain()se usa para potenciar el indicador general de la fuente a la que se aplica.- Por lo general,
createConvolver()es el que más se usa para agregar reverberación a una fuente. createDelay()se usa para agregar retraso al inicio de una fuente.createDynamicsCompressor()se usa para subir el volumen de la parte más silenciosa de una fuente y bajar el volumen de las partes más ruidosas.createPanner()ycreateStereoPanner()se usan para cambiar la posición espacial de la salida de sonido.
El método clásico
Antes de que estuviera disponible la API de Web Audio, no había forma de agregar efectos al audio en el navegador. Es posible encontrar soluciones alternativas que usen la renderización del servidor y el cambio entre transmisiones, pero esto puede generar mucha sobrecarga en la red.
Cómo usar el elemento de audio
Los únicos efectos de audio que se pueden controlar directamente son la reproducción y el volumen.
const audio = document.querySelector('audio');
// Sets audio volume to 50%
audio.volume = 0.5;
// Doubles the playback rate.
audio.playbackRate = 2;
Lecturas adicionales
Demostración
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔉</text></svg>"
/>
<title>How to add effects to audio</title>
</head>
<body>
<h1>How to add effects to audio</h1>
<button type="button">Press to hear audio effect</button>
</body>
</html>CSS
:root {
color-scheme: dark light;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 1rem;
font-family: system-ui, sans-serif;
}
JS
const button = document.querySelector('button');
button.addEventListener('click', () => {
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioCtx.createOscillator();
oscillator.type = 'sine';
// Value is in hertz.
oscillator.frequency.setValueAtTime(420, audioCtx.currentTime);
const biquadFilter = audioCtx.createBiquadFilter();
biquadFilter.type = 'lowpass';
biquadFilter.frequency.setValueAtTime(200, audioCtx.currentTime + 1);
oscillator.connect(biquadFilter);
biquadFilter.connect(audioCtx.destination);
oscillator.start();
oscillator.stop(2);
});