I visualizzatori audio trasformano il suono in movimento. Probabilmente li hai visti come barre o onde colorate in video musicali o podcast. La parte interessante? Puoi costruirne uno tu stesso usando un codice semplice. In questa guida, imparerai come creare un visualizzatore audio con HTML, CSS e JavaScript.

Useremo strumenti integrati del browser come Web Audio API e Canvas. Puoi anche usare un microfono per visualizzare la tua voce. Per un suono pulito, un microfono come Hollyland LARK M2 aiuta molto. Cattura un audio chiaro con basso rumore, quindi i tuoi elementi visivi reagiscono meglio a musica, discorsi o strumenti.

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

Strumenti essenziali per creare un visualizzatore audio TML/CSS/JS

Prima di iniziare a costruire, assicurati di avere pronti alcuni strumenti chiave. Qui è tutto gratuito e adatto ai principianti.

• Un browser moderno (Chrome, Firefox o Edge)
• Un editor di codice (VS Code, Sublime Text, ecc.)
• Un file audio locale (MP3 o WAV)
• Conoscenza di base di HTML e JavaScript
• Opzionale: un microfono (come LARK M2) per input in tempo reale

Inizieremo caricando un file da visualizzare, quindi mostreremo come usare il microfono.

Cos’è un visualizzatore audio?

Un visualizzatore audio è uno strumento che ascolta il suono e lo disegna come forme. Potrebbero essere barre, cerchi, onde o qualcos’altro. Le forme cambiano in base all’intonazione e al volume. I visualizzatori leggono la frequenza e l’ampiezza in tempo reale e convertono quei dati in movimento.

Rendono l’audio più coinvolgente, specialmente per podcast, musica o livestream.

Comprendere l’API web audio

L’API Web Audio consente a JavaScript di analizzare e manipolare il suono. Ti consente di fare cose come:

• Riprodurre file audio
• Usare il microfono
• Visualizzare le frequenze
• Applicare filtri ed effetti

Useremo AnalyserNode per leggere i dati di frequenza in tempo reale e l’API Canvas per disegnare barre che reagiscono ad essa.

Tutorial completo per codificare un visualizzatore audio con HTML/JS

Se sei nuovo di HTML, non preoccuparti. Vediamo cosa fa questo blocco di codice in modo che tu sappia esattamente cosa stai costruendo e perché ogni parte è importante.

Passaggio 1: dichiarare il tipo di documento e avviare il documento HTML

Questa riga dice al browser che stai scrivendo un documento HTML5. Viene sempre posizionato nella parte superiore del tuo file HTML. Quindi, avvia il documento HTML con il tag .

Passaggio 2: avviare il documento HTML

Questo apre il contenitore principale per la tua pagina HTML. L’attributo lang=”en” dice semplicemente al browser (e ai motori di ricerca) che la tua pagina è scritta in inglese.

Passaggio 3: sezione head

Tutto all’interno del tag contiene impostazioni e metadati per la tua pagina web.

• : Questo assicura che la tua pagina supporti tutti i caratteri standard, inclusi i simboli speciali.
• : Questo collega la tua pagina HTML a un file CSS esterno, che controllerà l’aspetto del tuo visualizzatore.

Passaggio 4: contenuto del body

Ecco dove vanno tutte le parti visibili e interattive della tua pagina web:

• Visualizzatore audio

  : Un’intestazione. Questo appare nella parte superiore della pagina per far sapere agli utenti a cosa serve lo strumento.
• : Questo crea un pulsante di caricamento file. Quando l’utente fa clic su di esso, può scegliere un file audio dal proprio computer. Questo è il modo in cui alimenteremo il suono nel visualizzatore.
• : Questa è l’area di disegno. Il JavaScript che scriverai in seguito userà questa tela per disegnare barre e forme colorate che si muovono con l’audio.
• : Questo carica il tuo file JavaScript. È lì che risiede tutta la logica per il visualizzatore, inclusa la riproduzione del suono e l’animazione delle barre.

Passaggio 5: chiudere l’HTML

Questo termina semplicemente il tuo documento HTML aggiungendo un input file e una tela per disegnare il visual.

Passaggio 6: stile della pagina (style.css)

Questa parte del tuo progetto controlla l’aspetto della tua pagina. Non stiamo cambiando il modo in cui qualcosa funziona, solo come appare agli utenti. Analizziamolo passo dopo passo.

Lo stile del body

body {

background-color: #111;

color: white;

font-family: Arial, sans-serif;

text-align: center;

}

• background-color: #111; Questo dà all’intera pagina uno sfondo grigio scuro (quasi nero). Aiuta le barre audio colorate a risaltare.
• color: white;
  Tutto il testo sulla pagina (come l’intestazione) apparirà in bianco.
• font-family: Arial, sans-serif;
  Imposta il testo per usare prima il font Arial. Se non è disponibile, ricade su un font sans-serif generico. Questo mantiene il testo pulito e moderno.
• text-align: center;
  Questo centra l’intestazione e altri elementi di testo al centro della pagina.

Lo stile del canvas

canvas {

background-color: black;

margin-top: 20px;

display: block;

margin-left: auto;

margin-right: auto;

border: 2px solid #444;

}

• background-color: black;
  Imposta il canvas (l’area in cui avviene l’animazione) a nero puro, il che dà al tuo visualizzatore un aspetto elegante.
• margin-top: 20px;
  Aggiunge spazio tra il canvas e l’intestazione o l’input file.
• display: block;
  Assicura che il canvas sia trattato come un elemento a livello di blocco in modo da poterlo stilizzare correttamente.
• margin-left: auto;
  margin-right: auto;
  Queste due righe centrano orizzontalmente il canvas sulla pagina.
  
• border: 2px solid #444;
  Disegna un bordo sottile, grigio scuro attorno al canvas. Questo dà al visualizzatore un aspetto incorniciato e rifinito.

Passaggio 7: aggiungere il JavaScript (app.js)

Queste righe prendono elementi dal tuo HTML:

• fileInput è il selettore di file
• canvas è dove apparirà l’animazione
• ctx è il contesto di disegno. Ci consente di disegnare sul canvas usando forme 2D

Passaggio 8: impostare la dimensione del canvas

Questo imposta le dimensioni del canvas a 800 pixel di larghezza e 300 pixel di altezza.

Passaggio 9: ascoltare il caricamento del file

Questa riga dice al browser: “Quando qualcuno carica un file audio, esegui il codice all’interno di questa funzione.”

Passaggio 10: impostare il contesto audio

Questo crea un nuovo contesto audio. È un ambiente speciale in cui il suono può essere analizzato o modificato.

Passaggio 11: caricare il file

Questo ottiene il file selezionato dall’utente e imposta un lettore per decodificarlo.

Passaggio 12: decodificare il file audio

Quando il file viene caricato, questa funzione decodifica i dati audio in un formato che il browser può capire.

Passaggio 13: creare la sorgente audio

Questo crea una nuova sorgente audio e la collega all’audio decodificato.

Passaggio 14: creare l’analizzatore

Qui, l’AnalyserNode è impostato per leggere i dati di frequenza. fftSize controlla quanto è dettagliata la lettura. dataArray memorizzerà quei valori di frequenza come numeri che possiamo usare per disegnare elementi visivi.

Passaggio 15: collegare i nodi

Questo collega tutto in una catena:

1. La sorgente invia il suono all’analizzatore.
2. L’analizzatore invia il suono agli altoparlanti.
3. La sorgente inizia a suonare.

Passaggio 16: la funzione di animazione

Questa funzione disegna le barre e continua a chiamarsi, creando un ciclo che viene eseguito circa 60 volte al secondo.

Passaggio 17: ottenere i dati di frequenza

Questo riempie dataArray con valori di frequenza da 0 a 255.

Passaggio 18: cancellare il canvas

Queste righe dipingono il canvas di nero prima di disegnare nuove barre, quindi non si ottiene disordine visivo.

Passaggio 19: impostare le dimensioni della barra

Calcoliamo quanto dovrebbe essere larga ogni barra, quindi iniziamo a disegnare da sinistra (x = 0).

Passaggio 20: disegnare le barre

L’altezza di ogni barra si basa sul valore di frequenza. Il colore cambia leggermente a seconda dell’altezza, creando un fantastico effetto animato.

• ctx.fillRect() disegna ogni rettangolo.
• Spostiamo x in avanti ogni volta per distanziare le barre in modo uniforme.

Passaggio 21: avviare l’animazione

Questo avvia la funzione di animazione una volta che l’audio viene riprodotto.

Passaggio 22: leggere i dati audio

Infine, questa riga dice al lettore di iniziare a elaborare il file audio caricato.

Come usare un microfono per la visualizzazione audio dal vivo

Ecco come catturare il suono dal vivo invece di un file:

È qui che LARK M2 brilla. È wireless, leggero e offre un audio pulito ed equilibrato. Quando visualizzi il suono dal vivo, la qualità del microfono è importante. LARK M2 aiuta a evitare interruzioni e picchi di rumore.

File vs. Microfono: quale dovresti usare?

Bonus: prova un visualizzatore audio circolare per un look unico

Vuoi qualcosa di diverso? Prova questa visualizzazione radiale:

Questo crea un anello pulsante di punti, ottimo per musica o tracce di meditazione.

Come stilizzare e personalizzare il tuo visualizzatore audio

• Prova i gradienti con ctx.createLinearGradient()
• Fai ridimensionare il canvas in base alla dimensione della finestra
• Aggiungi pulsanti di pausa/riproduzione per il controllo dell’utente
• Registra lo schermo per trasformarlo in un video
• Usa ctx.globalAlpha per le scie di dissolvenza

Dal codice al web: pubblica facilmente il tuo visualizzatore

Vuoi condividere il tuo lavoro?

1. Ospitalo gratuitamente su GitHub Pages o Netlify
2. Carica il tuo HTML, CSS e JS
3. Collega alla tua pagina live
4. Bonus: aggiungi branding audio e visivo per renderlo personale

Conclusione

Hai appena costruito il tuo visualizzatore audio funzionante! Sia che tu usi file o un microfono live come Hollyland LARK M2, ora hai un progetto che dà vita al suono.

Hai imparato come:

• Usare l’API Web Audio per analizzare il suono
• Disegnare elementi visivi su canvas
• Catturare il suono da un file o da un microfono
• Creare animazioni a barre e circolari

Ora vai a sperimentare. Prova nuove forme, combina strumenti o collegalo ad app musicali. Le possibilità creative sono infinite.

Domande frequenti

1. Posso usarlo con app di streaming musicale?

Non direttamente. A causa della sicurezza del browser e del copyright, non puoi accedere agli stream da app come Spotify. Invece, usa file scaricati o un input microfonico.

2. Funzionerà su dispositivi mobili?

Per lo più, sì. Ma alcuni browser limitano la riproduzione audio e l’accesso al microfono. È meglio testare prima su un desktop, quindi adattare per i dispositivi mobili.

3. Come posso salvarlo come video?

Usa software di registrazione dello schermo come OBS o Loom. Puoi quindi modificare il visualizzatore in video musicali, reel o intro.