Cómo agregar efectos al audio

Tony Conway

La forma moderna

La API de Web Audio usa la interfaz AudioContext() para administrar fuentes, filtros y destinos. Una vez que creaste un nuevo AudioContext(), crea un nodo de fuente de audio, como un AudioBufferSourceNode o OscillatorNode. Por ejemplo, considera un oscilador básico con un filtro de paso bajo aplicado.

Browser Support

  • Chrome: 35.
  • Edge: 12.
  • Firefox: 25.
  • Safari: 14.1.

Source

Usa el método createBiquadFilter()

Primero, crea un nuevo AudioContext(). Luego, crea un nodo de fuente de audio, como un AudioBufferSourceNode o OscillatorNode. Para este ejemplo, crearás un nodo oscilador sine, que tiene una frecuencia de 420 Hertz desde el momento en que comienza a reproducirse.

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(). Configura el tipo en lowpass y la frecuencia para que comience un segundo después del inicio de la reproducción. Luego, conecta el biquadFilter al oscillator.

const biquadFilter = audioCtx.createBiquadFilter();
biquadFilter.type = 'lowpass';
biquadFilter.frequency.setValueAtTime(200, audioCtx.currentTime + 1);
oscillator.connect(biquadFilter);

Por último, conecta el biquadFilter al destino del 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 tu computadora. Después de un segundo de reproducción, el filtro lowpass entra en vigencia. Después de dos segundos, se detiene el oscilador.

Otros filtros y efectos disponibles

Se pueden agregar otros nodos de filtro a un AudioContext para crear diferentes efectos:

La forma clásica

Antes de la disponibilidad de la API de Web Audio, no había forma de agregar efectos al audio en el navegador. Es posible usar soluciones alternativas con la renderización del servidor y el cambio entre transmisiones, pero esto puede generar una gran sobrecarga de red.

Usa 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;

Browser Support

  • Chrome: 3.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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);
});