Sound Visualizer
Visualiseur audio en Web Audio : 20 barres qui réagissent au vrai spectre sonore — son de démo synthétisé, micro optionnel, source externe prise en charge.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0378-root contient trois zones : .viz-bars (20 barres .viz-bar créées par le script, décoratives), .viz-controls (deux vrais <button>) et .viz-status (annonce d'état pour les lecteurs d'écran). Le CSS donne aux barres un dégradé indigo-violet (linear-gradient(to top, #6366f1, #d946ef)) et une hauteur au repos de 4 px.
Le script initialise un AudioContext par racine, avec un AnalyserNode (FFT de 256 points, 128 bins de fréquences, lissage à 0,78). À chaque image, getByteFrequencyData remplit un tableau de 128 octets. Les 20 barres sont associées à des plages de fréquences selon une échelle logarithmique (20 Hz–Nyquist) : les graves occupent les premières barres, les aigus les dernières — comme un vrai égaliseur de spectre. Hauteur calculée : valeur / 255 × 126 px, minimum 4 px.
Le son de démonstration est entièrement synthétisé : un ordonnanceur setTimeout planifie des événements Web Audio 280 ms à l'avance en boucle de 8 temps à 120 BPM (un temps = 0,25 s). La boucle combine : une grosse caisse (oscillateur sinus de 90 à 28 Hz, enveloppe d'amplitude), un charleston (bruit blanc filtré passe-haut à 8 800 Hz), un clap (bruit blanc filtré passe-bande à 1 500 Hz) et une mélodie en pentatonique G4–G5 (oscillateurs en dents de scie à 659, 523, 784, 587 Hz, filtrés passe-bas à 3 200 Hz). La richesse harmonique des dents de scie anime les barres du milieu, les percussions les barres graves et aiguës.
Pour brancher votre propre lecteur, ajoutez data-fx0378-source="#mon-audio" sur la racine : le script écoute play sur cet élément <audio> ou <video>, crée un MediaElementAudioSourceNode (une seule fois par élément), le connecte à l'analyseur et à la sortie, puis lance le dessin des barres. Attention CORS : un fichier hébergé sur un autre domaine doit envoyer les en-têtes Access-Control-Allow-Origin adéquats, sinon createMediaElementSource échoue.
L'AudioContext se suspend dès que la racine sort de l'écran (IntersectionObserver) ou que l'onglet est masqué (visibilitychange), et reprend à leur retour. Arrêt propre : les pistes du micro sont stoppées (stream.getTracks().forEach(t => t.stop())), les nœuds déconnectés, le contexte suspendu.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la bouclerequestAnimationFrameest remplacée par des mises à jour toutes les 300 ms (3–4 Hz) sans transition CSS. Le visualiseur reste informatif — les barres reflètent le spectre réel du son — sans mouvement continu. Le son et le message de statut fonctionnent normalement. - Boutons accessibles : les deux boutons portent
aria-pressedmis à jour à chaque changement d'état ("false"/"true"). Ils sont atteignables par Tab, activables par Entrée ou Espace, et dotés d'un contour:focus-visible. Leur libellé change entre « Lancer la démo » et « Arrêter la démo ». - Barres décoratives : le conteneur
.viz-barsportearia-hidden="true"; les barres ne transportent aucune information sonore, elles sont un reflet visuel. L'état sonore est annoncé dans.viz-status(aria-live="polite"). - Micro et https :
getUserMediaest bloqué sur les pages non sécurisées (http en production). Un message d'erreur précis est affiché selon le type d'erreur : refus, micro absent, page non sécurisée. - Aucune interaction gestuelle imposée : aucun son ne démarre sans clic explicite de l'utilisateur (politique d'autoplay des navigateurs). Le micro ne s'active qu'après confirmation du navigateur.
Compatibilité navigateur
Web Audio API (AudioContext, AnalyserNode, createMediaStreamSource, createMediaElementSource, IntersectionObserver). Aucune dépendance externe. Mesuré dans Chromium 151 et Firefox 153 : son de démonstration, analyse spectrale, deux copies indépendantes dans la même page, 0 erreur JS. WebKit supporte Web Audio depuis Safari 14.1 : non vérifié en vrai Safari.
Sans JavaScript ou sans Web Audio (navigateur très ancien), les 20 barres à 4 px sont visibles, les boutons sont affichés mais inactifs. Aucune erreur levée.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0378-root">
<div class="viz-bars" aria-hidden="true"></div>
<div class="viz-controls">
<button class="viz-btn viz-btn--demo" type="button" aria-pressed="false">
<span class="viz-btn-icon" aria-hidden="true">▶</span>
<span class="viz-btn-label">Lancer la démo</span>
</button>
<button class="viz-btn viz-btn--mic" type="button" aria-pressed="false">
<span class="viz-btn-icon" aria-hidden="true">🎙</span>
<span class="viz-btn-label">Microphone</span>
</button>
</div>
<div class="viz-status" aria-live="polite" aria-atomic="true"></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 |
|---|---|---|
Source audio (HTML — attribut data-fx0378-source sur .fx-0378-root) |
Aucune : seul le son de démo synthétisé est disponible | Passez le sélecteur CSS de votre élément <audio> ou <video> (ex. data-fx0378-source="#mon-player"). Le visualiseur démarre automatiquement à la lecture et s'arrête à la pause. CORS : si le fichier audio vient d'un autre domaine, il doit renvoyer Access-Control-Allow-Origin: *. |
Couleur basse et couleur haute des barres (CSS — --viz-low et --viz-high sur .fx-0378-root) |
#6366f1 (indigo) → #d946ef (violet-rose) | Redéfinissez les deux variables sur la racine : style="--viz-low:#f97316;--viz-high:#fbbf24". |
Nombre de barres (JS — constante NUM_BARS) |
20 | Augmentez jusqu'à 48 pour plus de détail fréquentiel. Diminuez jusqu'à 8 pour un rendu épuré. La largeur des barres (flex: 1; max-width: 14px) s'adapte automatiquement. |
Résolution FFT (JS — analyser.fftSize) |
256 (128 bins) | Passez à 512 ou 1024 pour affiner la résolution fréquentielle — surtout utile si vous afficher plus de 32 barres. Doit être une puissance de 2. |
Tempo de la démo (JS — constante BPM) |
120 | Ralentissez à 90 pour un groove plus posé, montez à 140 pour un effet plus rapide. Le motif de 8 temps s'adapte automatiquement. |
Hauteur maximale des barres (JS — le 126 dans le calcul de hauteur) |
126 px | Ajustez selon la hauteur du conteneur parent. Ne doit pas dépasser la hauteur de .viz-bars (height: 130px). |
FAQ
data-fx0378-source="#id-du-lecteur" sur la balise .fx-0378-root. Le visualiseur se connecte automatiquement à la lecture et se déconnecte à la pause. Important CORS : si votre fichier audio est hébergé sur un autre domaine (CDN, service tiers), ce domaine doit renvoyer l'en-tête Access-Control-Allow-Origin: * ou votre domaine spécifiquement — sinon createMediaElementSource échoue et un message d'erreur s'affiche.getUserMedia est bloqué sur les pages non sécurisées — déployez en https. (2) Permission refusée : l'utilisateur a refusé l'accès au micro dans la fenêtre du navigateur — il peut réautoriser depuis les paramètres du site. (3) Aucun micro détecté : vérifiez que le micro est branché et reconnu par le système.PAT_KICK, PAT_HAT, PAT_CLAP et PAT_MEL définissent le motif de 8 temps ; SCALE les fréquences de la mélodie ; BPM le tempo. Les fonctions schedKick, schedHat, schedClap et schedNote créent les nœuds Audio à chaque step.
