Slider Tick Sound
Un input[type=range] natif joue via Web Audio API un bip sinusoïdal de 50 ms à chaque palier de 10 — la fréquence monte de 400 Hz à 800 Hz avec la valeur.
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 input du slider. À chaque mouvement, la valeur brute est arrondie au palier de 10 le plus proche (Math.round(v / 10) * 10) et comparée au dernier palier mémorisé (lastTick). Un son n'est émis que lorsque ce palier change — pas à chaque pixel parcouru, ce qui empêche les déclenchements intempestifs lors d'un glissement lent.
Le son est généré par la Web Audio API sans aucune ressource externe : un OscillatorNode de type sine est connecté à un GainNode, lui-même branché sur AudioContext.destination. La méthode exponentialRampToValueAtTime ramène le gain vers 0,001 sur la durée du bip — l'oscillateur s'éteint proprement sans artefact de clic.
La fréquence suit une rampe linéaire : 400 + palier × 4 Hz. Les paliers de 0 à 100 couvrent ainsi 400 Hz (grave) à 800 Hz (aigu), produisant une sensation musicale de montée ou de descente lors du déplacement du curseur.
Un seul AudioContext est instancié à la première interaction et réutilisé pour tous les bips ultérieurs (getSndCtx()). Cette stratégie respecte la limite du navigateur sur les contextes audio simultanés et s'adapte à la politique autoplay : sans geste utilisateur préalable, l'API reste en état suspended et reprend automatiquement à la première interaction.
Accessibilité
- prefers-reduced-motion : sans objet — l'effet est 100 % sonore, sans animation CSS ni canvas. Aucun traitement n'est nécessaire côté motion.
- L'élément
<input type="range">natif est accessible au clavier sans code supplémentaire : Flèches ← →, Home, End, Page Up/Down déplacent le curseur et déclenchent les ticks sonores normalement. - La valeur courante est affichée en texte dans
#sndSliderVal— les lecteurs d'écran peuvent l'annoncer ; le son est une couche complémentaire, jamais le seul vecteur d'information. - ⚠️ Le code de base n'associe pas de
<label>au slider : ajouter<label for="sndSlider">…</label>est requis pour la conformité WCAG 1.3.1 (information et relations). - Le rapport de contraste du texte de valeur (#6366f1 sur #0a0a0f) est de 4,6:1, conforme WCAG AA (seuil 4,5:1 pour texte normal).
Compatibilité navigateur
Nécessite Web Audio API et input[type=range] — pris en charge dans tous les navigateurs modernes depuis 2014.
Sans Web Audio (très anciens navigateurs ou bloc CSP strict), le slider s'affiche et fonctionne normalement — seul le son est absent. Aucune erreur JS fatale n'est levée : <code>getSndCtx()</code> est protégée par un <code>try/catch</code>.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="snd-slider-container">
<!-- label recommandé pour WCAG 1.3.1 -->
<label for="sndSlider">Valeur</label>
<input type="range" class="snd-slider" id="sndSlider"
min="0" max="100" value="50">
<div class="snd-slider-value" id="sndSliderVal">50</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 |
|---|---|---|
| min / max / step (attributs HTML) | 0 / 100 / 1 | Plage de valeurs et pas du slider. step contrôle l'incrément des flèches clavier ; la détection de paliers sonores est indépendante (toujours arrondie à ×10 dans le code de base). |
| Palier : Math.round(v / 10) * 10 (JS) | 10 | Remplacer 10 par 5 donne des bips tous les 5 unités (20 ticks sur la plage entière). Remplacer par 25 donne seulement 4 bips. Mettre à jour lastTick initial en conséquence. |
| Fréquence base : 400 + currentTick * 4 (JS) | 400–800 Hz | Changer 400 (note de base) ou 4 (incrément par palier) pour déplacer la plage sonore. Exemple : 220 + currentTick * 6 → 220–820 Hz (plus grave, plus étendu). |
| Volume : 0.05 (3e arg. de playTone) | 0.05 | Valeur initiale du GainNode avant le ramp-out (0 = silence, 1 = plein). Entre 0,02 et 0,05 pour une discrétion en contexte professionnel ; 0,15 pour être audible dans un environnement bruyant. |
| Durée : 0.05 s (2e arg. de playTone) | 0.05 s (50 ms) | Durée du bip. 0,03 = très sec, 0,10 = légèrement réverbérant. Au-delà de 0,2, des bips peuvent se chevaucher si le slider est bougé rapidement. |
| Type d'onde : 'sine' (3e arg. de playTone) | sine | Forme d'onde de l'oscillateur. 'triangle' = plus mat, 'sawtooth' = clic plus agressif, 'square' = style 8-bit. |
| background de .snd-slider (CSS) | rgba(99,102,241,.2) | Couleur du fond de la piste. Remplacer par votre couleur brand (ex. rgba(34,197,94,.2) pour un thème vert). |
| background de .snd-slider::-webkit-slider-thumb (CSS) | #6366f1 | Couleur du curseur. Associer le box-shadow à la même teinte pour le glow : rgba(R,G,B,.5) 0 0 10px. |
| max-width de .snd-slider-container (CSS) | 260px | Largeur maximale du composant. Mettre à 100% ou retirer pour un slider pleine largeur dans un dashboard. |
FAQ
AudioContext est créé à la première interaction et peut rester en état suspended sur iOS jusqu'au premier toucher — il reprend automatiquement. En pratique : aucun son n'est joué tant que l'utilisateur n'a pas bougé le curseur.10 dans Math.round(v / 10) * 10 par votre valeur (ex. 5 pour des bips tous les 5 unités, 25 pour seulement 4 bips). Initialisez aussi lastTick à la valeur de départ du slider arrondie au même palier pour éviter un bip parasite lors du premier mouvement.currentTick à lastTick avant d'appeler playTone. Si currentTick > lastTick, utilisez une fréquence plus haute ou un type d'onde différent pour signaler la montée. Exemple : playTone(currentTick > lastTick ? 660 : 440, 0.05, 'sine', 0.05) — deux notes distinctes, do vs la.
