Ajouter des effets à un fichier audio

Tony Conway
Tony Conway

L'approche moderne

L'API Web Audio utilise l'interface AudioContext() pour gérer les sources, les filtres et les destinations. Une fois que vous avez créé un AudioContext(), créez un nœud de source audio, tel qu'un AudioBufferSourceNode ou un OscillatorNode. Prenons l'exemple d'un oscillateur de base auquel est appliqué un filtre passe-bas.

Navigateurs pris en charge

  • 35
  • 12
  • 25
  • 14.1

Source

Utiliser la méthode createBiquadFilter()

Commencez par créer un AudioContext(). Créez ensuite un nœud de source audio, tel qu'un AudioBufferSourceNode ou un OscillatorNode. Dans cet exemple, vous allez créer un nœud d'oscillateur sine dont la fréquence est de 420 hertz à partir du moment où la lecture commence.

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

Ensuite, créez un nœud d'effet à l'aide de createBiquadFilter(). Définissez le type sur lowpass et la fréquence de démarrage une seconde après le début de la lecture. Ensuite, connectez biquadFilter à oscillator.

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

Enfin, connectez biquadFilter à la destination de audioCtx, avant de démarrer le oscillator et de l'arrêter après deux secondes de lecture.

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

Le son de l'oscillateur passe par le filtre non affecté et passe à sa destination, à savoir les haut-parleurs de votre ordinateur. Après une seconde de lecture, le filtre lowpass s'applique. Au bout de deux secondes, l'oscillateur s'arrête.

Autres filtres et effets disponibles

Vous pouvez ajouter d'autres nœuds de filtre à un AudioContext pour créer différents effets:

Méthode classique

Avant le lancement de l'API Web Audio, il n'était pas possible d'ajouter des effets aux contenus audio dans le navigateur. Il existe des solutions de contournement qui utilisent le rendu côté serveur et le basculement entre les flux, mais cela peut entraîner une surcharge importante du réseau.

Utiliser l'élément audio

Les seuls effets audio qui peuvent être contrôlés directement sont la lecture et le volume.

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

Navigateurs pris en charge

  • 3
  • 12
  • 3,5
  • 3.1

Source

Complément d'informations

Démonstration

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