Scroll Ambient Sound
Un conteneur scrollable pilote en temps réel la fréquence d'un oscillateur sinusoïdal — le pitch monte de 200 Hz à 800 Hz à mesure que l'utilisateur défile vers le bas.
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 écoute l'événement scroll sur le conteneur .snd-scroll-container. Un throttle de 150 ms (Date.now()) filtre les déclenchements excessifs — au défilement continu, un son est émis tous les 150 ms maximum.
La position scrollée est normalisée : ratio = scrollTop / (scrollHeight − clientHeight). Ce ratio 0→1 est interpolé sur la plage 200–800 Hz : freq = 200 + ratio × 600. Position haute = 200 Hz (grave), fond du scroll = 800 Hz (aigu).
La fréquence calculée est transmise à playTone(freq, 0.08, 'sine', 0.03), un utilitaire Web Audio API externe (non inclus dans l'effet). Cette fonction crée un OscillatorNode en mode sine, le connecte à un GainNode (gain max 0,08) et pilote l'enveloppe via une rampe linéaire de 30 ms — résultat : un bref blip sinusoïdal sans clic.
Visuellement, 16 barres CSS (.snd-scroll-bar-fill) aux largeurs prédéfinies simulent un spectre audio figé. Elles servent d'ancrage visuel : l'utilisateur comprend qu'il interagit avec quelque chose de sonore avant même de scroller.
Accessibilité
- Pas de gestion
prefers-reduced-motion: l'effet ignore cette préférence système — le son se déclenche même si l'utilisateur a activé le mode réduit. À l'intégrateur de conditionner l'initialisation si nécessaire. - Aucun attribut
aria-role,aria-labelniaria-describedbysur le conteneur — le composant n'est pas décrit pour les lecteurs d'écran. - Le scroll au clavier (flèches ↑↓ lorsque le conteneur est focusé, ou via tabulation si le conteneur est tabulable) déclenche nativement l'événement
scroll, rendant l'effet accessible aux utilisateurs clavier sans code supplémentaire. - L'étiquette
.snd-scroll-label(« 🔊 Scrollez pour entendre ») informe les utilisateurs voyants — aucun équivalent textuel accessible n'est fourni aux lecteurs d'écran. - La politique autoplay audio des navigateurs peut suspendre l'
AudioContextavant la première interaction utilisateur : la fonctionplayTonede l'intégrateur doit appelerctx.resume()sictx.state === 'suspended'.
Compatibilité navigateur
Nécessite Web Audio API (AudioContext / webkitAudioContext) et l'événement scroll DOM — supportés dans tous les navigateurs modernes. La fonction playTone est un utilitaire externe à fournir dans la page hôte — l'effet ne la définit pas.
Si <code>AudioContext</code> n'est pas disponible (rare) ou si <code>playTone</code> est absente, l'effet est silencieux mais la page reste fonctionnelle — aucune erreur JS fatale.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="snd-scroll-container" id="sndScrollContainer">
<div class="snd-scroll-inner">
<div class="snd-scroll-bar">
<div class="snd-scroll-bar-fill" style="width: 60%"></div>
</div>
<!-- répéter .snd-scroll-bar autant de fois que nécessaire -->
<div class="snd-scroll-label">🔊 Scrollez pour entendre</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 |
|---|---|---|
| Fréquence basse — `200` (JS, constante inline) | 200 Hz | Pitch du son en bas de scroll. Réduire à 80 Hz pour un grave sourd, augmenter à 440 Hz pour commencer sur un La concert. |
| Plage de fréquences — `600` (JS, constante inline) | 600 Hz | Étendue de la variation : fréq. haute = `200 + 600 = 800 Hz`. Réduire à 200 pour un effet subtil, augmenter à 1200 pour un glissando dramatique. |
| Throttle — `150` ms (JS, `if (now - lastScroll < 150)`) | 150 ms | Intervalle minimal entre deux sons. 80 ms = plus continu et expressif, 300 ms = plus discret en arrière-plan. |
| Gain — `0.08` (JS, paramètre de `playTone`) | 0.08 | Volume du blip (0 = muet, 1 = plein). Valeur recommandée : 0,04–0,12 pour une ambiance non intrusive. |
| Forme d'onde — `'sine'` (JS, paramètre de `playTone`) | sine | Type d'oscillateur Web Audio. `triangle` = plus doux, `square` = électronique, `sawtooth` = acide. Modifier la valeur dans l'appel `playTone`. |
| Durée enveloppe — `0.03` s (JS, paramètre de `playTone`) | 0.03 s (30 ms) | Durée d'attaque de l'enveloppe dans `playTone`. Augmenter à 0,08 pour un son plus tenu et legato. |
| `.snd-scroll-inner` `min-height` (CSS) | 520px | Hauteur totale de la zone scrollable. Augmenter pour une course plus longue dans une vraie page de contenu. |
| `.snd-scroll-bar-fill` gradient (CSS) | #6366f1 → #a855f7 | Couleur des barres de visualisation. Remplacez par votre palette brand — les barres sont purement décoratives. |
FAQ
playTone(freq, gain, type, duration) comme utilitaire global. Définissez-la avant l'initialisation : créez un AudioContext partagé (window._sndCtx), instanciez un OscillatorNode + GainNode, pilotez l'enveloppe via linearRampToValueAtTime, connectez et arrêtez l'oscillateur après duration × 2 secondes. Appelez ctx.resume() si ctx.state === 'suspended'.AudioContext jusqu'à la première interaction explicite (tap). Le premier événement scroll (swipe) est suffisant pour débloquer le contexte si votre implémentation de playTone appelle ctx.resume(). Sans ce resume(), le contexte reste suspendu et aucun son n'est produit.document.getElementById('sndScrollContainer') par document.documentElement (ou document.body), et lisez window.scrollY + document.documentElement.scrollHeight - window.innerHeight à la place des propriétés du conteneur. Le reste (ratio, fréquence, throttle) reste identique.
