Ajouter des effets à un fichier audio

Tony Conway

La méthode 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.

Browser Support

  • Chrome: 35.
  • Edge: 12.
  • Firefox: 25.
  • Safari: 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 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ù il commence à jouer.

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

Créez ensuite un nœud d'effet à l'aide de createBiquadFilter(). Définissez le type sur lowpass et la fréquence pour qu'elle commence une seconde après le début de la lecture. Connectez ensuite le biquadFilter à l'oscillator.

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

Enfin, connectez le biquadFilter à la destination de l'audioCtx, avant de démarrer l'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é, puis vers la destination, qui correspond aux enceintes de votre ordinateur. Après une seconde de lecture, le filtre lowpass entre en vigueur. Après deux secondes, l'oscillateur s'arrête.

Autres filtres et effets disponibles

D'autres nœuds de filtre peuvent être ajoutés à un AudioContext pour créer différents effets :

La méthode classique

Avant la disponibilité de l'API Web Audio, il n'était pas possible d'ajouter des effets à l'audio dans le navigateur. Des solutions de contournement utilisant le rendu côté serveur et le basculement entre les flux sont possibles, mais cela peut entraîner une surcharge réseau importante.

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;

Browser Support

  • Chrome: 3.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

Documentation complémentaire

Démo

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