Come aggiungere effetti all'audio

Tony Conway
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 per la sorgente audio, ad esempio AudioBufferSourceNode o OscillatorNode. Prendiamo ad esempio un oscillatore base con un filtro low-pass applicato.

Supporto dei browser

  • 35
  • 12
  • 25
  • 14.1

Fonte

Utilizzo del metodo createBiquadFilter()

Per prima cosa, crea un nuovo AudioContext(). Quindi crea un nodo di sorgente audio, ad esempio AudioBufferSourceNode o OscillatorNode. Dovrai creare un nodo oscillatore sine, per questo esempio, che ha 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);

Quindi, crea un nodo effetto utilizzando createBiquadFilter(). Imposta il tipo su lowpass e la frequenza in modo da iniziare un secondo dopo l'inizio della riproduzione. Collega biquadFilter a oscillator.

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

Infine connetti biquadFilter alla destinazione del 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 fatto passare attraverso il filtro non interessato e raggiungere la destinazione, ossia gli altoparlanti del computer. Dopo un secondo di riproduzione, viene applicato il filtro lowpass. Dopo due secondi, l'oscillatore si arresta.

Altri filtri ed effetti disponibili

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

  • createWaveShaper() viene utilizzato per aggiungere distorsione a una fonte.
  • createGain() viene utilizzato per migliorare l'indicatore complessivo dell'origine a cui viene applicato.
  • createConvolver() è il più comunemente utilizzato per aggiungere riverbero a una sorgente.
  • createDelay() viene utilizzato per aggiungere un ritardo all'avvio di un'origine.
  • createDynamicsCompressor() viene utilizzato per alzare il volume della parte più bassa di una sorgente e abbassarlo per le parti più basse.
  • createPanner() e createStereoPanner() vengono utilizzati per modificare la posizione spaziale dell'output audio.

Il modo classico

Prima della disponibilità dell'API Web Audio, non c'era modo di aggiungere effetti all'audio nel browser. Sono possibili soluzioni alternative utilizzando il rendering lato server e il passaggio da uno stream all'altro, ma ciò può comportare un notevole overhead per la 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;

Supporto dei browser

  • 3
  • 12
  • 3,5
  • 3.1

Fonte

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