Como adicionar efeitos ao áudio

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 um AudioBufferSourceNode ou OscillatorNode. Como exemplo, considere um oscilador básico com um filtro passa-baixa aplicado.

Browser Support

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

Source

Como usar o método createBiquadFilter()

Primeiro, crie um novo AudioContext(). Em seguida, crie um nó de origem de áudio, como um AudioBufferSourceNode ou OscillatorNode. Neste exemplo, você vai criar um nó de 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 do audioCtx, antes de iniciar o oscillator e interrompê-lo 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 para o destino, que são os alto-falantes do computador. Após um segundo de reprodução, o filtro lowpass entra em vigor. Após dois segundos, o oscilador é interrompido.

Outros filtros e efeitos disponíveis

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

A maneira clássica

Antes da disponibilidade da API Web Audio, não havia como adicionar efeitos ao áudio no navegador. Soluções alternativas usando a renderização do lado do servidor e a alternância entre streams são possíveis, mas isso pode gerar muita sobrecarga de rede.

Como usar o elemento de áudio

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

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

Leitura adicional

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