Les visualiseurs audio transforment le son en mouvement. Vous les avez probablement vus sous forme de barres ou d’ondes colorées dans des clips musicaux ou des podcasts. Le plus intéressant ? Vous pouvez en créer un vous-même en utilisant du code simple. Dans ce guide, vous apprendrez à créer un visualiseur audio avec HTML, CSS et JavaScript.

Nous utiliserons des outils intégrés au navigateur comme l’API Web Audio et Canvas. Vous pouvez même utiliser un microphone pour visualiser votre voix. Pour un son clair, un micro comme le Hollyland LARK M2 est très utile. Il capture un audio clair avec peu de bruit, de sorte que vos visuels réagissent mieux à la musique, à la parole ou aux instruments.

Hollyland LARK M2 - Mini Lavalier Microphone

An incredibly lightweight and compact wireless button microphone that captures high-fidelity audio.

Key Features: 9g Button Size | 48 kHz/24-bit | 40 Hours Battery

Check on Amazon

Outils essentiels pour créer un visualiseur audio HTML/CSS/JS

Avant de commencer la construction, assurez-vous d’avoir quelques outils clés à disposition. Tout ce qui suit est gratuit et adapté aux débutants.

• Un navigateur moderne (Chrome, Firefox ou Edge)
• Un éditeur de code (VS Code, Sublime Text, etc.)
• Un fichier audio local (MP3 ou WAV)
• Une compréhension de base de HTML et JavaScript
• Optionnel : Un microphone (comme le LARK M2) pour une entrée en temps réel

Nous commencerons par télécharger un fichier à visualiser, puis nous montrerons comment utiliser votre micro.

Qu’est-ce qu’un visualiseur audio ?

Un visualiseur audio est un outil qui écoute le son et le dessine sous forme de formes. Il peut s’agir de barres, de cercles, d’ondes ou d’autre chose. Les formes changent en fonction de la hauteur et du volume. Les visualiseurs lisent la fréquence et l’amplitude en temps réel et convertissent ces données en mouvement.

Ils rendent l’audio plus attrayant, en particulier pour les podcasts, la musique ou les diffusions en direct.

Comprendre l’API Web Audio

L’API Web Audio permet à JavaScript d’analyser et de manipuler le son. Elle vous permet de faire des choses comme :

• Lire des fichiers audio
• Utiliser votre micro
• Visualiser les fréquences
• Appliquer des filtres et des effets

Nous utiliserons l’AnalyserNode pour lire les données de fréquence en temps réel et l’API Canvas pour dessiner des barres qui y réagissent.

Tutoriel complet pour coder un visualiseur audio avec HTML/JS

Si vous débutez en HTML, ne vous inquiétez pas. Examinons ce que fait ce bloc de code pour que vous sachiez exactement ce que vous construisez et pourquoi chaque partie est importante.

Étape 1 : déclarer le type de document et commencer le document HTML

Cette ligne indique au navigateur que vous écrivez un document HTML5. Elle est toujours placée en haut de votre fichier HTML. Ensuite, commencez le document HTML avec la balise .

Étape 2 : commencer le document HTML

Ceci ouvre le conteneur principal de votre page HTML. L’attribut lang=”en” indique simplement au navigateur (et aux moteurs de recherche) que votre page est écrite en anglais.

Étape 3 : section head

Tout ce qui se trouve à l’intérieur de la balise contient les paramètres et les métadonnées de votre page web.

• : Cela garantit que votre page prend en charge tous les caractères standard, y compris les symboles spéciaux.
• : Ceci relie votre page HTML à un fichier CSS externe, qui contrôlera l’apparence de votre visualiseur.

Étape 4 : contenu du body

C’est ici que se trouvent toutes les parties visibles et interactives de votre page web :

• Visualiseur audio

  : Un titre. Il apparaît en haut de la page pour informer les utilisateurs de l’utilité de l’outil.
• : Ceci crée un bouton de téléchargement de fichier. Lorsque l’utilisateur clique dessus, il peut choisir un fichier audio sur son ordinateur. C’est ainsi que nous alimenterons le visualiseur en son.
• : C’est la zone de dessin. Le JavaScript que vous écrirez plus tard utilisera ce canevas pour dessiner des barres et des formes colorées qui bougent avec l’audio.
• : Ceci charge votre fichier JavaScript. C’est là que se trouve toute la logique du visualiseur, y compris la lecture du son et l’animation des barres.

Étape 5 : fermer le HTML

Ceci termine simplement votre document HTML tout en ajoutant une entrée de fichier et un canevas pour dessiner le visuel.

Étape 6 : styliser la page (style.css)

Cette partie de votre projet contrôle l’apparence de votre page. Nous ne changeons pas le fonctionnement, juste l’apparence pour les utilisateurs. Décomposons-la étape par étape.

Le style du body

body {

background-color: #111;

color: white;

font-family: Arial, sans-serif;

text-align: center;

}

• background-color: #111; Ceci donne à toute la page un fond gris foncé (presque noir). Cela aide les barres audio colorées à ressortir.
• color: white;
  Tout le texte de la page (comme le titre) apparaîtra en blanc.
• font-family: Arial, sans-serif;
  Définit le texte pour utiliser d’abord la police Arial. Si elle n’est pas disponible, il utilise une police sans-serif générique. Cela garde le texte propre et moderne.
• text-align: center;
  Ceci centre le titre et les autres éléments de texte au milieu de la page.

Le style du canvas

canvas {

background-color: black;

margin-top: 20px;

display: block;

margin-left: auto;

margin-right: auto;

border: 2px solid #444;

}

• background-color: black;
  Définit le canevas (la zone où l’animation se produit) en noir pur, ce qui donne à votre visualiseur un aspect élégant.
• margin-top: 20px;
  Ajoute de l’espace entre le canevas et le titre ou l’entrée de fichier.
• display: block;
  Garantit que le canevas est traité comme un élément de niveau bloc pour que vous puissiez le styliser correctement.
• margin-left: auto;
  margin-right: auto;
  Ces deux lignes centrent horizontalement le canevas sur la page.
  
• border: 2px solid #444;
  Dessine une fine bordure gris foncé autour du canevas. Cela donne au visualiseur un aspect encadré et poli.

Étape 7 : Ajouter le JavaScript (app.js)

Ces lignes récupèrent des éléments de votre HTML :

• fileInput est le sélecteur de fichier
• canvas est l’endroit où l’animation apparaîtra
• ctx est le contexte de dessin. Il nous permet de dessiner sur le canevas en utilisant des formes 2D

Étape 8 : définir la taille du canevas

Ceci définit les dimensions du canevas à 800 pixels de large et 300 pixels de haut.

Étape 9 : écouter le téléchargement de fichier

Cette ligne dit au navigateur : “Quand quelqu’un télécharge un fichier audio, exécute le code à l’intérieur de cette fonction.”

Étape 10 : configurer le contexte audio

Ceci crée un nouveau contexte audio. C’est un environnement spécial où le son peut être analysé ou modifié.

Étape 11 : charger le fichier

Ceci obtient le fichier que l’utilisateur a sélectionné et configure un lecteur pour le décoder.

Étape 12 : décoder le fichier audio

Lorsque le fichier est chargé, cette fonction décode les données audio dans un format que le navigateur peut comprendre.

Étape 13 : créer la source audio

Ceci crée une nouvelle source audio et la connecte à l’audio décodé.

Étape 14 : créer l’analyseur

Ici, l’AnalyserNode est configuré pour lire les données de fréquence. fftSize contrôle le niveau de détail de la lecture. Le dataArray stockera ces valeurs de fréquence sous forme de nombres que nous pourrons utiliser pour dessiner des visuels.

Étape 15 : connecter les nœuds

Ceci connecte tout dans une chaîne :

1. La source envoie le son à l’analyseur.
2. L’analyseur envoie le son aux haut-parleurs.
3. La source commence à jouer.

Étape 16 : la fonction d’animation

Cette fonction dessine les barres et continue à s’appeler elle-même, créant une boucle qui s’exécute environ 60 fois par seconde.

Étape 17 : obtenir les données de fréquence

Ceci remplit le dataArray avec des valeurs de fréquence de 0 à 255.

Étape 18 : effacer le canevas

Ces lignes peignent le canevas en noir avant de dessiner de nouvelles barres, pour éviter l’encombrement visuel.

Étape 19 : configurer les dimensions des barres

Nous calculons la largeur que chaque barre doit avoir, puis commençons à dessiner depuis la gauche (x = 0).

Étape 20 : dessiner les barres

La hauteur de chaque barre est basée sur la valeur de fréquence. La couleur change légèrement en fonction de la hauteur, créant un effet d’animation cool.

• ctx.fillRect() dessine chaque rectangle.
• Nous déplaçons x vers l’avant à chaque fois pour espacer les barres uniformément.

Étape 21 : démarrer l’animation

Ceci démarre la fonction d’animation une fois que l’audio joue.

Étape 22 : lire les données audio

Enfin, cette ligne dit au lecteur de commencer à traiter le fichier audio téléchargé.

Comment utiliser un microphone pour une visualisation audio en direct

Voici comment capturer le son en direct au lieu d’un fichier :

C’est là que le LARK M2 brille. Il est sans fil, léger et délivre un audio propre et équilibré. Lorsque vous visualisez du son en direct, la qualité du micro est importante. Le LARK M2 aide à éviter les coupures et les pics de bruit.

Fichier vs. Micro : Lequel utiliser ?

Bonus : essayez un visualiseur audio circulaire pour un look unique

Vous voulez quelque chose de différent ? Essayez ce visuel radial :

Ceci crée un anneau pulsant de points, idéal pour la musique ou les pistes de méditation.

Comment styliser et personnaliser votre visualiseur audio

• Essayez les dégradés avec ctx.createLinearGradient()
• Faites redimensionner le canevas selon la taille de la fenêtre
• Ajoutez des boutons pause/lecture pour le contrôle de l’utilisateur
• Enregistrez l’écran pour le transformer en vidéo
• Utilisez ctx.globalAlpha pour des traînées qui s’estompent

Du code au web : publiez facilement votre visualiseur

Vous voulez partager votre travail ?

1. Hébergez-le gratuitement sur GitHub Pages ou Netlify
2. Téléchargez vos fichiers HTML, CSS et JS
3. Liez vers votre page en direct
4. Bonus : Ajoutez une identité audio et visuelle pour le personnaliser

Conclusion

Vous venez de construire votre propre visualiseur audio fonctionnel ! Que vous utilisiez des fichiers ou un micro en direct comme le Hollyland LARK M2, vous avez maintenant un projet qui donne vie au son.

Vous avez appris à :

• Utiliser l’API Web Audio pour analyser le son
• Dessiner des visuels sur un canevas
• Capturer le son à partir d’un fichier ou d’un microphone
• Créer des animations en barres et circulaires

Maintenant, expérimentez. Essayez de nouvelles formes, combinez des outils ou connectez-le à des applications musicales. Les possibilités créatives sont infinies.

FAQ

1. Puis-je utiliser ceci avec des applications de streaming musical ?

Pas directement. En raison de la sécurité du navigateur et des droits d’auteur, vous ne pouvez pas accéder aux flux d’applications comme Spotify. Utilisez plutôt des fichiers téléchargés ou une entrée de microphone.

2. Cela fonctionnera-t-il sur les appareils mobiles ?

En grande partie, oui. Mais certains navigateurs limitent la lecture audio et l’accès au microphone. Il est préférable de tester d’abord sur un ordinateur de bureau, puis d’ajuster pour le mobile.

3. Comment puis-je enregistrer ceci en tant que vidéo ?

Utilisez un logiciel d’enregistrement d’écran comme OBS ou Loom. Vous pouvez ensuite intégrer le visualiseur dans des clips vidéo, des reels ou des introductions.