Como adicionar efeitos ao áudio

Tony Conway
Tony Conway

A maneira moderna

A API Web Audio usa a interface AudioContext() para gerenciar origens, filtros e destinos. Depois de criar um novo AudioContext(), crie um nó de origem de áudio, como uma AudioBufferSourceNode ou OscillatorNode. Por exemplo, considere um oscilador básico com um filtro de passagem baixa aplicado.

Compatibilidade com navegadores

  • 35
  • 12
  • 25
  • 14.1

Origem

Como usar o método createBiquadFilter()

Primeiro, crie um novo AudioContext(). Em seguida, crie um nó de origem do áudio, como um AudioBufferSourceNode ou OscillatorNode. Para este exemplo, você criará um nó do oscilador sine, que tem uma frequência de 420 hertz a partir do momento em que começa a tocar.

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioCtx.createOscillator()
oscillator.type = 'sine';
 // Value is in hertz.
oscillator.frequency.setValueAtTime(420, audioCtx.currentTime);

Em seguida, crie um nó de efeito usando createBiquadFilter(). Defina o tipo como lowpass e a frequência para começar um segundo após o início da reprodução. Em seguida, conecte o biquadFilter ao oscillator.

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

Por fim, conecte o biquadFilter ao destino da audioCtx antes de iniciar a oscillator e interrompê-la após dois segundos de reprodução.

biquadFilter.connect(audioCtx.destination);
oscillator.start();
oscillator.stop(2);

O som do oscilador é transmitido pelo filtro não afetado e vai para o destino, que são os alto-falantes do computador. Após um segundo de reprodução, o filtro lowpass entra em vigor. Depois de dois segundos, o oscilador é interrompido.

Outros filtros e efeitos disponíveis

Outros nós de filtro podem ser adicionados a uma AudioContext para criar efeitos diferentes:

A forma clássica

Quando a API Web Audio foi disponibilizada, não havia uma forma de adicionar efeitos a áudio no navegador. Há soluções alternativas que usam a renderização do lado do servidor e a alternância entre streams, mas isso pode gerar muita sobrecarga na rede.

Como usar o elemento de áudio

Os únicos efeitos de áudio que podem ser controlados diretamente são reprodução e volume.

const audio = document.querySelector('audio');
 // Sets audio volume to 50%
audio.volume = 0.5;
// Doubles the playback rate.
audio.playbackRate = 2;

Compatibilidade com navegadores

  • 3
  • 12
  • 3,5
  • 3.1

Origem

Leia mais

Demonstração

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