Slik Legger du Inn en Gratis Metronom på Nettstedet Ditt

Driver du en musikkblogg, en side for privatundervisning eller en side full av tabulaturer, kan du legge til en fungerende metronom uten å bygge en selv. Kopier en liten kodesnutt, lim den inn på siden, og en komplett metronom dukker opp: tempo fra 20 til 300 BPM, tap tempo, valg av taktart og tre klikklyder. Alt kjører direkte i besøkerens nettleser, så det er ingenting å installere og ingen konto å opprette.

Dette er hele greien.

<div style="max-width:440px;margin:0 auto;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
  <iframe src="https://pluri.tools/embed/no/metronom" title="Metronom — pluri.tools" width="100%" height="600" style="border:0;display:block;width:100%" loading="lazy"></iframe>
  <a href="https://pluri.tools/no/metronom/" 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>

Det er hele integrasjonen. Resten av denne guiden viser hvordan du tilpasser den til ditt design, hvordan du limer den inn i WordPress, Wix eller Notion, og et triks for at iframen aldri viser rullefelt.

Hvorfor legge en metronom på siden din

En metronom er et av de verktøyene folk leter etter akkurat i det øyeblikket de leser innholdet ditt, verken før eller etter. Noen tilfeller der en innebygd widget slår en lenke som sender leseren bort:

• Undervisningssider. En lærer som skriver “øv denne skalaen i 80 BPM” kan plassere metronomen rett under øvelsen, klar når eleven scroller dit.
• Tabulaturer og noter. Vis tempoet til stykket ved siden av notasjonen, slik at musikeren kommer inn i riktig tempo med en gang.
• Øvingsrutiner. Et innlegg om å bygge opp fart kan koble hvert trinn til verktøyet leseren trenger for å øve.
• Nettsteder for band og studioer. Et lite verktøy som holder besøkende lenger på siden og gir dem en grunn til å komme tilbake.

Fordi widgeten lever inni en iframe, forstyrrer den aldri resten av siden. Den leser ikke innholdet ditt, endrer ikke nettstedets URL og laster seg selv.

Prøv den akkurat her

Dette er akkurat samme kodesnutt som over, lastet live på denne siden. Bruk knappene til å se den i lyst eller mørkt tema — koden under oppdateres til å matche. Trykk Start, dra i tempoet eller bruk Tap Tempo i takt med en sang.

Alt du ser over, inkludert den lille attribusjonslenken, er akkurat det besøkende på nettstedet ditt ser i det du limer inn koden.

Tilpass fargene til nettstedet ditt

Som standard følger widgeten besøkerens systemtema (lyst eller mørkt). Har siden din en fast stil, kan du tvinge frem temaet med parameteren theme i URL-en:

<!-- Alltid mørkt -->
<iframe src="https://pluri.tools/embed/no/metronom?theme=dark" ...></iframe>

<!-- Alltid lyst -->
<iframe src="https://pluri.tools/embed/no/metronom?theme=light" ...></iframe>

For bredden begrenser beholderen widgeten til max-width:440px mens iframen fyller den med width="100%", slik at den fyller smale kolonner på mobil uten å strekke seg rart bred på desktop. Endre beholderens max-width hvis layouten din er trangere, og dens border-radius for å matche de andre kortene på siden.

Widgeten finnes også på 13 språk. Bytt ut no i banen med språket du vil ha, for eksempel /embed/en/metronome for engelsk eller /embed/de/metronom for tysk. Hvert språk har sin egen slug i URL-en, så bruk den som passer.

Ingen rullefelt lenger: la iframen endre størrelse selv

Det mest irriterende med enhver iframe er den faste høyden. For lav, og kontrollene blir kuttet av; for høy, og det blir tomt rom igjen. Innbyggingen løser dette ved å rapportere sin faktiske høyde til foreldresiden hver gang den endres. Du trenger bare å lytte til den meldingen og tilpasse rammens størrelse.

Gi iframen en id og legg til dette korte skriptet én gang, hvor som helst på siden:

<iframe
  id="metronom-embed"
  src="https://pluri.tools/embed/no/metronom"
  title="Metronom — 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('metronom-embed')
      if (frame) frame.style.height = event.data.height + 'px'
    }
  })
</script>

Nå vokser og krymper rammen selv etter innholdet, uten noen gang å vise rullefelt. Hopper du over skriptet, er den faste høyden height="600" fortsatt en trygg standardverdi som rommer hele widgeten.

Merknader per plattform

De fleste nettstedbyggere behandler <iframe>-kode annerledes enn vanlig tekst. Regelen er enkel: lim den inn i en HTML- eller innbyggingsblokk, aldri i den visuelle redigeringen, som ofte fjerner iframer.

Plattform	Hvor koden skal limes inn
WordPress (blokkredigering)	Legg til en Egendefinert HTML-blokk og lim inn iframen. Den visuelle avsnittsredigeringen fjerner den.
Wix	Legg til elementet Bygg inn HTML (Bygg inn en widget) og lim inn koden.
Webflow	Dra inn et Embed-element og lim inn iframen.
Notion	Lim inn den enkle URL-en https://pluri.tools/embed/no/metronom og velg Opprett innbygging.
Blogger	Bytt til HTML-visning når du redigerer innlegget, og lim iframen direkte inn i koden.
Ren HTML	Lim den inn hvor som helst inni <body>.

Vanlige feil

• Lime inn i den formaterte tekstredigeringen. Forsvinner widgeten når du lagrer, brukte du feil blokk. Bytt til Egendefinert HTML eller Kode.
• En høyde som kutter av knappene. Kontrollene Start og Tap Tempo ligger nær bunnen. Hold høyden på minst 600, eller bruk skriptet for automatisk størrelsestilpasning ovenfor.
• Å tro at et ekstra bibliotek trengs. Widgeten trenger ikke noe ekstra skript for å fungere. Det eneste valgfrie skriptet er høydelytteren.
• Blande http og https. Bygg alltid inn via https. Koden i denne guiden bruker det allerede.

Hva innbyggingen inkluderer

Kodesnutten inneholder en liten lenke “Powered by pluri.tools”, rett under widgeten, som fører tilbake til verktøyet. Den lenken er det eneste innbyggingen ber om til gjengjeld, og det er slik metronomen forblir gratis. De som vil ha hele siden, med alle 13 språkene og delbare tempo-URL-er, kan følge den.

Ofte stilte spørsmål

Er den virkelig gratis?

Ja. Ingen konto, ingen API-nøkkel og ingen bruksgrense trengs. Kodesnutten inneholder bare en attribusjonslenke, ikke noe annet.

Vil den gjøre siden min tregere?

Iframen bruker loading="lazy", så nettleseren laster den først når den ruller inn i visning. Widgeten selv er lett og genererer lyden med Web Audio API, uten lydfiler å laste ned.

Kan besøkende endre tempoet, eller er det fast?

Den er helt interaktiv. Alle som ser på siden din, kan stille inn hvilken som helst BPM fra 20 til 300, bytte taktart, velge lyd og bruke Tap Tempo. Innbyggingen åpnes på 120 BPM.

Fungerer den på mobil?

Ja. Widgeten er responsiv, og lyden fungerer på iOS og Android. På iOS spilles lyden gjennom høyttaleren selv med lydløs-bryteren på, så snart noen trykker Start.

Kan jeg bytte språk?

Ja. Bytt ut no i URL-en med et av de 13 språkene som støttes, med det språkets slug, for eksempel /embed/sv/metronom for svensk eller /embed/da/metronom for dansk.