Ambient Soundscape
Quatre couches sonores synthétiques (pluie, vent, oiseaux, vagues) activables indépendamment via Web Audio API — oscillateurs FM modulés au LFO, zéro fichier audio, zéro requête réseau.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Atmosphère comprend 57 effets, dont 10 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet est purement Web Audio API — aucun canvas, aucun requestAnimationFrame, aucun fichier audio. Quatre couches sonores synthétiques coexistent dans un AudioContext partagé, chacune formée d'un OscillatorNode principal branché sur un GainNode de sortie. Les couches s'activent et se désactivent indépendamment sans interrompre les autres ; leurs références sont conservées dans l'objet t (clé = nom du son).
Chaque couche utilise une forme d'onde et une fréquence calées sur le timbre naturel de son référent : pluie = sawtooth à 200 Hz (harmoniques riches proches du bruit dense) ; vent = sine à 120 Hz (souffle grave) ; oiseaux = sine à 900 Hz (pépiement aigu) ; vagues = sine à 80 Hz (grondement de fond). Les gains de sortie vont de 0,008 (oiseaux, discrets) à 0,015 (vent, dominant) — calibrés pour ne pas saturer même avec les quatre couches actives simultanément.
Une modulation FM par LFO anime chaque couche : un second OscillatorNode (sine, fréquence aléatoire 0,5–2,5 Hz) est connecté au paramètre frequency du premier. Son gain vaut 0,1 × fréquence principale — soit ±20 Hz pour la pluie, ±9 Hz pour les vagues — ce qui introduit un trémolo naturel et évite le côté mécanique d'un ton pur fixe. Le LFO redémarre à une fréquence légèrement différente à chaque activation, rendant le son vivant.
L'AudioContext est créé paresseusement au premier clic (politique autoplay navigateur : un contexte créé avant une interaction utilisateur resterait en état suspended). À la désactivation, osc.stop() est appelé dans un try/catch puis les références sont supprimées de t — les nœuds sont garbage-collectés. Un re-clic crée de nouveaux nœuds propres depuis les mêmes paramètres.
Accessibilité
- prefers-reduced-motion : absent du code. Les boutons ont un
transition: .3sde scale au survol, mais l'effet n'a aucune animation visuelle en boucle — l'omission n'a pas d'impact pratique sur les utilisateurs sensibles au mouvement. - Les contrôles sont des
<div>sansrole="button"nitabindex— non focusables au clavier, invisibles aux technologies d'assistance qui dépendent de la navigation clavier. À corriger pour une intégration accessible. - Aucun
aria-pressedsur les boutons toggle — l'état actif (fond indigo, box-shadow) est purement visuel, non communiqué aux lecteurs d'écran. - Les émojis (🌧 🌀 🐦 🌊) sont restitués en texte descriptif par la majorité des lecteurs d'écran (ex. « nuage avec pluie ») — compréhensible mais imprécis pour des contrôles audio ; un
aria-labelexplicite par bouton est recommandé. - Contraste en état
.active: bordure#6366f1et box-shadow indigo sur fond#0a0a0f— les émojis restent lisibles (fond sombre, WCAG AA respecté côté visuel).
Compatibilité navigateur
Nécessite AudioContext (ou webkitAudioContext) et OscillatorNode — disponibles dans tous les navigateurs modernes. Zéro dépendance externe, zéro fichier audio.
Si <code>AudioContext</code> et <code>webkitAudioContext</code> sont tous deux absents, <code>getSndCtx()</code> lève une exception attrapée implicitement — les boutons togglent visuellement (classe <code>.active</code>) sans produire de son. Aucune erreur console fatale.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<div class="snd-ambient" id="sndAmbient">
<div class="snd-ambient-btn" data-sound="rain">🌧</div>
<div class="snd-ambient-btn" data-sound="wind">🌀</div>
<div class="snd-ambient-btn" data-sound="birds">🐦</div>
<div class="snd-ambient-btn" data-sound="waves">🌊</div>
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| n.rain.freq (JS) | 200 | Fréquence en Hz de l'oscillateur pluie (sawtooth). Monter à 350 pour un rideau dense, descendre à 100 pour une pluie lointaine. |
| n.rain.type (JS) | "sawtooth" | Forme d'onde : "sawtooth" produit des harmoniques riches proches du bruit, "sine" donne un ton pur, "square" un son plus agressif. |
| n.birds.freq (JS) | 900 | Hauteur des pépiements en Hz. 1 200 pour des oiseaux tropicaux aigus, 600 pour une tourterelle. |
| vol de chaque couche (JS) | 0.008 – 0.015 | Gain de sortie de l'oscillateur. Garder sous 0,03 pour éviter la distorsion ; 4 couches simultanées s'accumulent. |
| LFO gain (JS) = 0.1 × freq | calculé | Profondeur de modulation FM. Multiplier par 2 pour un trémolo prononcé, par 0 pour un ton pur fixe sans variation. |
| LFO freq (JS) = 0.5 + 2 × Math.random() | 0.5 – 2.5 Hz | Vitesse d'oscillation du LFO. Remplacer par une constante (ex. 1.0) pour un trémolo régulier et reproductible. |
| .snd-ambient-btn width/height (CSS) | 60px | Taille des boutons ronds. 48 px pour une sidebar compacte, 80 px pour une UI plein écran dédiée. |
| rgba(99, 102, 241, …) (CSS) | indigo | Couleur d'accent de l'interface : border, background et box-shadow des états :hover et .active. Remplacez les valeurs RGB par votre couleur brand. |
FAQ
<audio loop>) remplacerait la synthèse si un rendu réaliste est requis.t (clé = nom du son, valeur = { osc, lfo, gain }). Toutes les couches actives s'additionnent dans l'AudioContext ; les gains calibrés (0,008–0,015) garantissent l'absence de saturation même avec les 4 couches simultanées.AudioContext actif avant une interaction utilisateur explicite (politique autoplay de Chrome, Firefox et Safari). L'AudioContext est créé paresseusement au premier clic via getSndCtx() ; toutes les activations suivantes réutilisent ce contexte déjà débloqué.
