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.
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:
createWaveShaper()permet d'ajouter de la distorsion à une source.createGain()permet d'amplifier le signal global de la source à laquelle il est appliqué.createConvolver()est le plus souvent utilisé pour ajouter de la réverbération à une source.createDelay()permet d'ajouter un délai au début d'une source.createDynamicsCompressor()permet d'augmenter le volume des parties les plus calmes d'une source et de baisser le volume des passages les plus forts.createPanner()etcreateStereoPanner()permettent de modifier la position spatiale de la sortie audio.
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;
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);
});