Come Incorporare un Metronomo Gratis nel Tuo Sito

Se gestisci un blog di musica, un sito per lezioni private o una pagina piena di spartiti, puoi aggiungere un metronomo funzionante senza scrivere nulla da zero. Copia un piccolo frammento di codice, incollalo nella pagina, e compare un metronomo completo: tempo da 20 a 300 BPM, tap tempo, scelta della misura e tre suoni di click. Tutto gira nel browser di chi visita il sito, senza installare nulla e senza creare account.

Ecco tutto il necessario.

<div style="max-width:440px;margin:0 auto;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
  <iframe src="https://pluri.tools/embed/it/metronomo" title="Metronomo — pluri.tools" width="100%" height="600" style="border:0;display:block;width:100%" loading="lazy"></iframe>
  <a href="https://pluri.tools/it/metronomo/" target="_blank" rel="noopener" style="display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;border-top:1px solid #e2e8f0;font:500 12px system-ui,sans-serif;color:#64748b;text-decoration:none">
    <img src="https://pluri.tools/favicon.svg" alt="" width="16" height="16" style="display:block" />
    Powered by pluri.tools
  </a>
</div>

Questa è l’intera integrazione. Il resto della guida spiega come adattarlo al tuo design, come incollarlo in WordPress, Wix o Notion, e un trucco per evitare che l’iframe mostri mai una barra di scorrimento.

Perché mettere un metronomo nella tua pagina

Un metronomo è uno di quegli strumenti che le persone cercano esattamente nel momento in cui stanno leggendo i tuoi contenuti, né prima né dopo. Alcuni casi in cui un widget integrato batte un link che manda via il lettore:

• Pagine di lezione. Un insegnante che scrive “esercitati su questa scala a 80 BPM” può mettere il metronomo subito sotto l’esercizio, pronto quando lo studente arriva a quel punto.
• Spartiti e tablature. Mostra il tempo del brano accanto alla notazione così il musicista parte già nel tempo giusto.
• Routine di pratica. Un articolo su come aumentare la velocità può abbinare a ogni passaggio lo strumento necessario per esercitarsi.
• Siti di band e studi. Un piccolo strumento utile che trattiene i visitatori più a lungo sulla pagina e dà loro un motivo per tornare.

Dato che il widget vive dentro un iframe, non interferisce mai con il resto della pagina. Non legge i tuoi contenuti, non cambia l’URL del tuo sito e si carica da solo.

Provalo qui

Questo è esattamente lo stesso snippet del codice qui sopra, caricato dal vivo in questa pagina. Usa i pulsanti per vederlo in chiaro o scuro: il codice qui sotto si aggiorna di conseguenza. Premi Avvia, trascina il tempo o usa il Tap Tempo a ritmo di una canzone.

Tutto quello che vedi qui sopra, incluso il piccolo link di attribuzione, è esattamente ciò che vedrà chi visita il tuo sito non appena incollerai il codice.

Adatta i colori al tuo sito

Di default il widget segue il tema di sistema di chi lo visita (chiaro o scuro). Se la tua pagina ha uno stile fisso, forza il tema con il parametro theme nell’URL:

<!-- Sempre scuro -->
<iframe src="https://pluri.tools/embed/it/metronomo?theme=dark" ...></iframe>

<!-- Sempre chiaro -->
<iframe src="https://pluri.tools/embed/it/metronomo?theme=light" ...></iframe>

Per la larghezza, il contenitore limita il widget a max-width:440px mentre l’iframe lo riempie con width="100%", così riempie le colonne strette su mobile senza allargarsi troppo su desktop. Modifica il max-width del contenitore se il tuo layout è più stretto, e il suo border-radius per farlo combaciare con le altre card della pagina.

Il widget esiste anche in 13 lingue. Cambia l’it nel percorso con la lingua che vuoi, per esempio /embed/en/metronome in inglese o /embed/es/metronomo in spagnolo. Ogni lingua ha il proprio slug nell’URL, quindi usa quello corrispondente.

Niente più barra di scorrimento: fai ridimensionare l’iframe da solo

Il punto più fastidioso di ogni iframe è l’altezza fissa. Troppo bassa, taglia i controlli; troppo alta, lascia spazio vuoto. L’embed risolve il problema segnalando la propria altezza reale alla pagina genitore ogni volta che cambia. Basta ascoltare quel messaggio e adattare la dimensione del frame.

Assegna un id all’iframe e aggiungi questo piccolo script una volta, in un punto qualsiasi della pagina:

<iframe
  id="metronomo-embed"
  src="https://pluri.tools/embed/it/metronomo"
  title="Metronomo — pluri.tools"
  width="100%"
  height="600"
  style="border:0;max-width:440px;border-radius:12px"
  loading="lazy"
></iframe>

<script>
  window.addEventListener('message', function (event) {
    if (event.data && event.data.type === 'pluri-embed-height') {
      var frame = document.getElementById('metronomo-embed')
      if (frame) frame.style.height = event.data.height + 'px'
    }
  })
</script>

Ora il frame cresce e si restringe da solo in base al contenuto, senza mostrare mai una barra di scorrimento. Se salti lo script, l’altezza fissa height="600" resta un valore sicuro che contiene l’intero widget.

Note per piattaforma

La maggior parte dei costruttori di siti tratta il codice <iframe> in modo diverso dal testo normale. La regola è semplice: incollalo in un blocco HTML o di incorporazione, mai nell’editor visivo, che tende a rimuovere gli iframe.

Piattaforma	Dove incollare il codice
WordPress (editor a blocchi)	Aggiungi un blocco HTML personalizzato e incolla l’iframe. L’editor visivo del paragrafo lo rimuove.
Wix	Aggiungi l’elemento Incorpora HTML (Incorpora un widget) e incolla il codice.
Webflow	Trascina un elemento Embed e incolla l’iframe.
Notion	Incolla l’URL semplice https://pluri.tools/embed/it/metronomo e scegli Crea incorporamento.
Blogger	Passa alla visualizzazione HTML del post e incolla l’iframe direttamente nel codice.
HTML puro	Incollalo in qualsiasi punto dentro il <body>.

Errori comuni

• Incollare nell’editor di testo formattato. Se il widget scompare al salvataggio, hai usato il blocco sbagliato. Passa a HTML personalizzato o Codice.
• Un’altezza che taglia i pulsanti. I controlli Avvia e Tap Tempo sono vicini al fondo. Mantieni un’altezza di almeno 600, oppure usa lo script di ridimensionamento automatico qui sopra.
• Pensare che serva un’altra libreria. Il widget non ha bisogno di alcuno script aggiuntivo per funzionare. L’unico script opzionale è quello che ascolta l’altezza.
• Mescolare http e https. Incorpora sempre tramite https. Il codice di questa guida lo usa già.

Cosa include l’embed

Lo snippet include un piccolo link “Powered by pluri.tools”, subito sotto il widget, che rimanda allo strumento. Quel link è l’unica cosa che l’embed chiede in cambio, ed è così che il metronomo resta gratuito. Chi vuole la pagina completa, con tutte le 13 lingue e URL di tempo condivisibili, può seguirlo.

Domande frequenti

È davvero gratis?

Sì. Non serve un account, una chiave API né ci sono limiti di utilizzo. Lo snippet include solo un link di attribuzione, nient’altro.

Rallenterà il mio sito?

L’iframe usa loading="lazy", quindi il browser lo carica solo quando entra nella visuale. Il widget in sé è leggero e genera il suono con la Web Audio API, senza scaricare alcun file audio.

I visitatori possono cambiare il tempo, o è fisso?

È completamente interattivo. Chiunque visualizzi la tua pagina può impostare qualsiasi BPM da 20 a 300, cambiare la misura, scegliere il suono e usare il Tap Tempo. L’embed si apre a 120 BPM.

Funziona sul telefono?

Sì. Il widget è responsive e l’audio funziona su iOS e Android. Su iOS suona dall’altoparlante anche con l’interruttore silenzioso attivo, non appena l’utente preme Avvia.

Posso cambiare la lingua?

Sì. Sostituisci l’it nell’URL con una delle 13 lingue supportate, usando lo slug di quella lingua, per esempio /embed/de/metronom in tedesco o /embed/ja/metronomu in giapponese.