Spatial Audio Dir
Une note đ” au centre de quatre ondes qui s'Ă©largissent et s'Ă©teignent en continu (2 s, dĂ©calĂ©es de 0,3 s), et un point violet qui fait le tour Ă 90 px en 5 s pour figurer la source sonore qui se dĂ©place : un indicateur visuel de direction du son. La page ne joue aucun son et n'utilise pas l'audio spatialisĂ© â CSS seul, zĂ©ro JavaScript, ondes figĂ©es et source posĂ©e Ă gauche si l'utilisateur rĂ©duit les animations.
Mis Ă jour le
Cet effet fait partie d'Effect.Labs â 840 effets vanilla, une partie gratuite, une partie premium. 3D comprend 50 effets, dont 8 gratuits. DĂ©couvrir la catĂ©gorie â
3 exemples d'usage
Comment ça marche
MalgrĂ© son nom, Spatial Audio Dir ne produit aucun son : pas de fichier audio, pas de Web Audio API, pas de JavaScript. C'est un pictogramme animĂ© qui montre une direction, utile justement quand le son n'est pas entendu (joueur sourd, page sans audio, explication d'un dispositif sonore). Si votre page a un vrai son spatialisĂ©, cet effet peut en ĂȘtre l'affichage ; c'est votre script qui devra lui donner la direction (voir la FAQ).
La racine .fx-0046-root (fond #0a0a0f, 300 px de haut au minimum) contient .xr-audio-dir, qui centre tout. Quatre .xr-audio-wave sont des cercles de 40, 80, 120 et 160 px, bord indigo de 2 px Ă 30 %, empilĂ©s au mĂȘme centre ; chacune joue xrAudioPulse en 2 s (ease-out) : elle passe de l'Ă©chelle 0,8 et 60 % d'opacitĂ© Ă 1,2 et 0 %, avec des dĂ©lais de 0, 0,3, 0,6 et 0,9 s. On voit donc des anneaux qui partent du centre et s'effacent en vagues. Au-dessus, .xr-audio-center, un disque indigo de 40 px, porte le caractĂšre đ”.
Le point .xr-audio-indicator, 12 px, #a855f7, est posĂ© au centre lui aussi ; son animation xrAudioMove enchaĂźne rotate() de 0 Ă 360° puis translateX(90px) : la rotation fait tourner le repĂšre, la translation Ă©loigne le point de 90 px dans ce repĂšre, si bien qu'il dĂ©crit un cercle de 90 px de rayon en 5 s, Ă vitesse constante. Les ondes partent du centre (l'auditeur), le point indique d'oĂč vient le son : c'est cette sĂ©paration qui rend l'indicateur lisible.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limitĂ© Ă.fx-0046-rootarrĂȘte tout : les quatre ondes deviennent des anneaux fixes de plus en plus pĂąles (50, 50, 35 et 20 %), le point se pose Ă gauche du centre. La direction reste lisible. MesurĂ© : 0 % de pixels changĂ©s en 0,8 s dans Chromium, Firefox et WebKit, contre 1,4 Ă 1,8 % en mode normal. - Lecteurs d'Ă©cran : la note đ” est un vrai caractĂšre, qu'un lecteur d'Ă©cran lit (« notes de musique » ou Ă©quivalent). Si l'indicateur est dĂ©coratif, ajoutez
aria-hidden="true"sur.xr-audio-center; s'il porte une information (« bruit de pas à gauche »), écrivez-la en texte à cÎté : un point qui tourne n'est pas lu. - Contraste : le point violet mesure 5,0:1 sur le fond sombre ; les ondes, à 30 %, sont volontairement discrÚtes. Pour un usage d'accessibilité (joueurs sourds), donnez au point une couleur franche et un halo, comme dans le premier exemple.
- Rythme : ondes toutes les 0,3 s environ, tour complet en 5 s, sans clignotement ni flash.
Compatibilité navigateur
CSS seul : animations de transform (scale, rotate, translateX) et d'opacity, aucun JavaScript, aucune API audio, aucune dĂ©pendance. MesurĂ© dans Chromium 151, Firefox 153 et WebKit 26 (le moteur de Safari) : mĂȘme rendu, mĂȘme arrĂȘt sous mouvement rĂ©duit. Le dessin de la note đ” dĂ©pend de la police emoji du systĂšme. Non vĂ©rifiĂ© sur un vrai Safari.
Aucune propriété récente : tous les navigateurs actuels affichent les ondes et le point qui tourne. Sans police emoji, la note peut apparaßtre en noir et blanc ou en carré vide : remplacez-la alors par un petit svg.
Le code
Structure HTML Ă coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0046-root">
<div class="xr-audio-dir">
<div class="xr-audio-wave"></div> ⊠(4 ondes de 40 à 160 px)
<div class="xr-audio-center">đ”</div>
<div class="xr-audio-indicator"></div>
</div>
</div>Paiement unique, sans abonnement â le code est Ă toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Pictogramme central (HTML â .xr-audio-center) |
CaractĂšre đ” sur disque indigo de 40 px | Remplacez la note par un svg (personnage, oreille, haut-parleur) pour un rendu identique sur tous les systĂšmes, comme dans les exemples. |
Couleurs (CSS â .xr-audio-wave, .xr-audio-center, .xr-audio-indicator) |
Ondes indigo Ă 30 %, point #a855f7 | Donnez au point une couleur qui tranche avec les ondes : c'est lui qui porte la direction. |
Distance du point (CSS â translateX(90px) dans xrAudioMove) |
90 px | Changez les deux valeurs des images clés ensemble. Gardez-la plus grande que la plus grande onde divisée par deux (80 px) pour que le point reste hors des ondes. |
Vitesse (CSS â 2s des ondes, 5s du point) |
2 s et 5 s | Des ondes plus lentes (3 s) calment l'ensemble ; un point plus rapide (2 s) Ă©voque un son qui file autour de l'auditeur. |
| Direction fixe (CSS) | Le point tourne en continu | Pour montrer une direction prĂ©cise, arrĂȘtez la rotation : animation: none; transform: rotate(180deg) translateX(90px) place le point Ă gauche, 0deg Ă droite, -90deg en haut. |
Fond (CSS â .fx-0046-root) |
#0a0a0f | Changez ou retirez le fond ; sur fond clair, foncez les ondes et cerclez le disque central. |
FAQ
PannerNode, un moteur de jeu), cet indicateur peut l'accompagner, mais c'est votre code qui doit lui donner la direction..xr-audio-indicator { animation: none; transform: rotate(var(--angle, 0deg)) translateX(90px) }, puis, depuis votre script, el.style.setProperty('--angle', angle + 'deg'), l'angle étant compté depuis la droite, dans le sens des aiguilles d'une montre. Le code vendu ne contient pas ce script : il fait tourner la source en continu.
