Come aggiungere effetti all'audio

Tony Conway

Il modo moderno

L'API Web Audio utilizza l'interfaccia AudioContext() per gestire origini, filtri e destinazioni. Dopo aver creato un nuovo AudioContext(), crea un nodo di origine audio, ad esempio un AudioBufferSourceNode o OscillatorNode. Ad esempio, considera un oscillatore di base a cui è applicato un filtro passa-basso.

Browser Support

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

Source

Utilizzare il metodo createBiquadFilter()

Innanzitutto, crea un nuovo AudioContext(). Poi crea un nodo di origine audio, ad esempio un AudioBufferSourceNode o OscillatorNode. In questo esempio, creerai un nodo oscillatore sine con una frequenza di 420 hertz dal momento in cui inizia la riproduzione.

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

Poi crea un nodo effetto utilizzando createBiquadFilter(). Imposta il tipo su lowpass e la frequenza in modo che inizi un secondo dopo l'inizio della riproduzione. Poi collega biquadFilter a oscillator.

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

Infine, collega biquadFilter alla destinazione di audioCtx, prima di avviare oscillator e interromperlo dopo due secondi di riproduzione.

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

Il suono dell'oscillatore viene trasmesso attraverso il filtro non interessato e alla destinazione, ovvero gli altoparlanti del computer. Dopo un secondo di riproduzione, il filtro lowpass entra in vigore. Dopo due secondi, l'oscillatore viene arrestato.

Altri filtri ed effetti disponibili

È possibile aggiungere altri nodi filtro a un AudioContext per creare effetti diversi:

  • createWaveShaper() viene utilizzato per aggiungere distorsione a un'origine.
  • createGain() viene utilizzato per aumentare il segnale complessivo dell'origine a cui viene applicato.
  • createConvolver() viene utilizzato più comunemente per aggiungere riverbero a un'origine.
  • createDelay() viene utilizzato per aggiungere un ritardo all'inizio di un'origine.
  • createDynamicsCompressor() viene utilizzato per aumentare il volume della parte più silenziosa di un'origine e diminuire il volume delle parti più rumorose.
  • createPanner() e createStereoPanner() vengono utilizzati per modificare la posizione spaziale dell'uscita audio.

Il modo classico

Prima della disponibilità dell'API Web Audio, non era possibile aggiungere effetti all'audio nel browser. Sono possibili soluzioni alternative che utilizzano il rendering lato server e il passaggio da uno stream all'altro, ma ciò può comportare un notevole sovraccarico di rete.

Utilizzare l'elemento audio

Gli unici effetti audio che possono essere controllati direttamente sono la riproduzione e il 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

Per approfondire

Demo

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