Drag Feedback Sound
Oscillateur sawtooth Web Audio continu pendant le drag — la position X module la fréquence de 80 Hz à 280 Hz en temps réel, sans latence.
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
Un AudioContext unique est créé à la demande via getSndCtx() au premier mousedown — la création différée satisfait la politique de geste utilisateur des navigateurs modernes. À chaque drag, un OscillatorNode de type sawtooth et un GainNode (gain fixe à 0,02) sont instanciés, connectés en série et démarrés sans enveloppe : oscillateur → gain → destination.
La position X de l'objet dans la zone (c, en px CSS) est normalisée sur la largeur du conteneur et convertie en fréquence instantanément : f = 80 + (c / width) × 200, soit 80 Hz à gauche et 280 Hz à droite. La mise à jour est synchrone dans le handler mousemove — aucun requestAnimationFrame intermédiaire — la hauteur suit la souris sans délai perceptible.
La position de l'objet est contrainte dans les bornes de la zone par Math.max(0, Math.min(width − 60, c)) (la constante 60 correspond à la taille de l'objet en CSS px). Au mouseup, oscillator.stop() coupe le son de manière abrupte — sans fondu sortant. Un oscillateur frais est créé à chaque nouveau drag pour éviter l'InvalidStateError sur un AudioNode déjà arrêté.
Accessibilité
- Pas de
prefers-reduced-motiondans le code — la transition CSSbox-shadow .2ssur.snd-drag-objs'anime sans réduction ; ajoutez@media (prefers-reduced-motion: reduce) { .snd-drag-obj { transition: none } }si votre public est concerné. - Aucun attribut ARIA sur la zone ou l'objet draggable — ni
role="button", niaria-grabbed, niaria-label. L'élément n'est pas annoncé comme interactif aux lecteurs d'écran. - Interaction souris uniquement : le code n'écoute que
mousedown,mousemoveetmouseup— les écrans tactiles et la navigation clavier ne peuvent pas déclencher l'effet. - L'
AudioContextest instancié au premiermousedown(geste utilisateur valide). La politique de lecture automatique des navigateurs est respectée : aucun son ne se lance à l'affichage de la page. - Le contraste de l'emoji 🎵 sur le dégradé violet-rose n'est pas validé dans le code — vérifiez le ratio si vous remplacez le contenu de l'objet par du texte.
Compatibilité navigateur
Nécessite Web Audio API (AudioContext, OscillatorNode) et les événements souris. Pas de support touch natif. Zéro dépendance externe.
Si <code>AudioContext</code> est absent, le drag visuel fonctionne normalement (la position se met à jour), mais aucun son n'est émis. Aucune erreur JS bloquante — la page reste fonctionnelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<div class="snd-drag-area" id="sndDragArea">
<div class="snd-drag-obj" id="sndDragObj">🎵</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 |
|---|---|---|
| d.type = "sawtooth" | "sawtooth" | Type d'onde de l'oscillateur. "sawtooth" = riche en harmoniques, timbre de friction abrasif. "triangle" = doux et flûté. "sine" = ton pur sans harmoniques. "square" = creux et électronique. |
| d.frequency.value = 100 | 100 Hz | Fréquence de l'oscillateur au moment où le drag commence (avant le premier déplacement). Montez à 200–400 Hz pour une tessiture de départ plus brillante. |
| 80 (dans 80 + c / l.width * 200) | 80 Hz | Fréquence minimale, atteinte quand l'objet est à l'extrême gauche de la zone. Modifiez cette constante pour ajuster le bas de la plage. |
| 200 (dans 80 + c / l.width * 200) | 200 Hz (amplitude) | Étendue de la plage de fréquences : max = 80 + 200 = 280 Hz. Passez à 420 pour couvrir 80–500 Hz, ou à 920 pour un octave complet (80–1000 Hz). |
| o.gain.value = .02 | 0,02 | Volume de l'oscillateur (0 à 1). 0,02 est très discret — passez à 0,05 pour un son plus présent, 0 pour couper le son tout en conservant le drag visuel. |
| .snd-drag-obj { width: 60px; height: 60px } | 60 × 60 px | Taille de l'objet draggable en CSS. La constante 60 dans la formule JS (width − 60) doit être mise à jour si vous changez la taille. |
| .snd-drag-obj { background: linear-gradient(135deg, #6366f1, #ec4899) } | Gradient violet-rose | Couleur de fond de l'objet draggable. Remplacez par votre palette brand ou un aplat (background: #3b82f6). |
FAQ
mousedown, mousemove et mouseup — pas d'événements touch*. Pour le support tactile, ajoutez touchstart, touchmove et touchend en adaptant les coordonnées via event.touches[0].clientX et event.touches[0].clientY."triangle" donne un timbre doux et flûté, "sine" un ton pur sans harmoniques. Vous pouvez changer d.type après le createOscillator(), avant le start().AudioContext peut passer en état suspended après une longue inactivité ou si la politique du navigateur l'exige. Ici, le contexte est créé dans le mousedown (geste utilisateur valide), ce qui évite la suspension initiale. En cas de silence inattendu, appelez getSndCtx().resume() pour réactiver le contexte.
