Il lettore che suona

Lettori, SVG, TransizioniGSAPImpegnativaPeso compresso: Demo 9,7 KBGSAP 28 KBGratisScarica lo zip

Un lettore musicale che suona davvero: tre brani composti nel browser con Web Audio, senza scaricare niente. L'onda è disegnata dalle note stesse e si trascina per muoversi nel brano, le barre vicine alla testina si gonfiano con la musica, play diventa pausa, e mentre suona la copertina disegnata si anima.

Il codice

Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The player that plays</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/readex-pro@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the player that plays: three little pieces made in the browser with Web Audio; the wave is drawn from the
         notes and moves with them, the cover comes alive while it plays, play turns into pause -->
    <section class="player" aria-label="Music player" data-player data-autoclic>
      <div class="cover" data-cover><div class="cover__in" data-cover-in></div></div>
      <div class="track">
        <p class="track__title"><span class="roll" data-title></span></p>
        <p class="track__by">Made in your browser</p>
      </div>
      <div class="wave" role="slider" tabindex="0" aria-label="Position in the piece" aria-valuemin="0" data-wave></div>
      <div class="times" aria-hidden="true"><span data-at>0:00</span><span data-left>0:00</span></div>
      <div class="buttons">
        <button class="btn" type="button" aria-label="Previous piece" data-prev><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 6v12M18 6.5v11L9.5 12z"/></svg></button>
        <button class="btn btn--play" type="button" aria-label="Play" data-play><svg viewBox="0 0 24 24" aria-hidden="true"><polygon data-a/><polygon data-b/></svg></button>
        <button class="btn" type="button" aria-label="Next piece" data-next><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17 6v12M6 6.5v11l8.5-5.5z"/></svg></button>
      </div>
      <p class="sr" aria-live="polite" data-live></p>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.

63 valori da cambiare

Apri il Playground

Oppure chiedila a Claude Code

Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:

Prendi «Il lettore che suona» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una scheda scura: una copertina disegnata (un sole che sorge sui campi), Morning Fields e Made in your browser, un'onda di 64 barre, il tempo passato e quello che manca, e i pulsanti indietro, play e avanti. Premendo play il triangolo si apre nelle due barre della pausa e la musica parte: accordi morbidi, un arpeggio, un basso e una piccola stanza che fa eco. Mentre suona le barre già passate prendono il colore del brano, quelle vicine alla testina si gonfiano a ritmo e la copertina vive: il sole sale e i campi ondeggiano, nella notte la strada corre e l'orizzonte pulsa, sulla finestra la pioggia scende. Trascinando sull'onda ci si sposta nel brano. Avanti e indietro fanno scivolare via la copertina dalla parte del cambio mentre la nuova arriva dall'altra, il titolo scorre, il colore cambia e l'onda nuova cresce barra dopo barra da sinistra; ogni brano ha la sua forma: quella regolare dei campi, quella piena della notte, quella frastagliata della pioggia.

Come funziona

La musica scritta in note

Ogni brano sono sedici battute su quattro accordi, fatte due volte: piano all'inizio, piene nel mezzo, più rade alla fine. Le note sono eventi (quando, che cosa, quanto dura, quanto forte): accordi lunghi, un arpeggio a crome (a semiminime nelle prime battute; nella pioggia note alte a caso, come gocce), un basso due ottave sotto, e nella notte dei piatti di rumore filtrato.

Il suono

L'AudioContext nasce al primo play premuto davvero (isTrusted). Ogni nota è un oscillatore con un filtro e un inviluppo di volume (salita, tenuta, discesa esponenziale fino a 0,0001); dietro c'è una stanza fatta col ConvolverNode e del rumore che si spegne, e un compressore. Ogni tratto suonato ha il suo canale: la pausa lo sfuma in 80 millisecondi e ferma le sue note, così ripartire non riporta le note vecchie.

Il tempo e l'anticipo

Le note non partono con un setTimeout nel loro istante: ogni 40 millisecondi si guardano quelle dei prossimi 0,35 secondi e si fissano sull'orologio dell'audio (2,5 secondi se la pagina è nascosta). La posizione viene da quell'orologio quando c'è suono, e da quello di GSAP quando non c'è (l'anteprima della libreria non può suonare).

L'onda

Ogni ventesimo di secondo si calcola quanto suona il brano, sommando le note col loro inviluppo; ogni barra mescola il picco e la media del suo pezzo, con un po' di contrasto. Sul ticker di GSAP le barre vicine alla testina crescono con quanto suona in quell'istante e quelle passate prendono il colore. Trascinando (con la cattura del puntatore) o coi tasti ci si sposta nel brano.

Il cambio, le copertine e l'anteprima

Play e pausa sono due poligoni i cui punti scivolano dalle due metà del triangolo alle due barre. Cambiando brano la copertina vecchia esce dalla parte del cambio e la nuova entra dall'altra in SWAP secondi, il titolo scorre, la variabile --tint cambia colore e le barre crescono una dopo l'altra. Ogni copertina è un SVG con una timeline ferma che parte e si ferma con la musica. Un clic da script (l'anteprima della libreria) preme play, poi avanti, poi trascina sull'onda, poi la pausa, senza suono.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`TRACKS`	script.js	`[['Morning Fields', 92, [[62, 66, 69], …], 'fields', '#ffb35c'], …]`	I brani: il titolo, i battiti al minuto, i quattro accordi in numeri MIDI (60 è il do centrale), la copertina (fields, drive o rain) e il colore.
`BARS`	script.js	`64`	Le barre dell'onda.
`VOLUME`	script.js	`0.7`	Quanto forte.
`SWAP`	script.js	`0.6`	I secondi che la copertina impiega a cambiare.

Provali nel Playground

Quando usarla

Per il sito di un musicista o di un'etichetta, un podcast, una galleria di suoni, un'app di meditazione, la pagina di un evento con la sua colonna sonora: qualunque lettore che debba sembrare vivo.

Sul telefono

La scheda è larga al massimo 380 pixel; il dito trascina sull'onda senza far scorrere la pagina (touch-action none sull'onda) e i pulsanti sono di 48 e 64 pixel. Su iPhone il suono parte dal primo tocco su play.

Con il movimento ridotto

La musica suona uguale; le barre non si gonfiano, le copertine non si muovono, cambiano senza scivolare, l'icona e l'onda nuova cambiano subito, e niente entrata.

Trappole

Senza un gesto vero il browser non lascia suonare un AudioContext: va creato al primo play premuto davvero, mai al caricamento (Chrome scrive un avviso).
Le note non si fanno partire con setTimeout: si fissano un po' in anticipo sull'orologio dell'audio, e con la pagina nascosta, dove i timer rallentano, con più anticipo.
Fermare abbassando il volume generale e ripartire subito dopo riporta su le note vecchie: ogni tratto suonato ha il suo canale, che sfuma e ferma le sue note.
Le rampe esponenziali non arrivano a zero: si scende fino a 0,0001, partendo da un valore fissato con setValueAtTime.
In Safari una copertina quadrata fatta con aspect-ratio ha dato problemi: qui il quadrato è fatto con padding-bottom: 100%.

Librerie

GSAP 3.15.0, Readex Pro (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 9,7 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 3 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

Licenza d’uso

Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.