Sådan Indlejrer du en Gratis Metronom på dit Websted
Driver du en musikblog, et websted til privatundervisning eller en side fuld af becifringer, kan du tilføje en fungerende metronom uden selv at bygge en. Kopiér et lille kodestykke, indsæt det på siden, og en fuld metronom dukker op: tempo fra 20 til 300 BPM, tap tempo, valg af taktart og tre kliklyde. Alt kører direkte i besøgendes browser, så der er intet at installere og ingen konto at oprette.
Det er hele sagen.
<div style="max-width:440px;margin:0 auto;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
<iframe src="https://pluri.tools/embed/da/metronom" title="Metronom — pluri.tools" width="100%" height="600" style="border:0;display:block;width:100%" loading="lazy"></iframe>
<a href="https://pluri.tools/da/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 integrationen. Resten af denne guide viser, hvordan du tilpasser den til dit eget design, hvordan du indsætter den i WordPress, Wix eller Notion, og et trick der sikrer, at iframen aldrig viser en rullebjælke.
Hvorfor sætte en metronom på din side
En metronom er et af de værktøjer, folk søger efter præcis i det øjeblik de læser dit indhold, hverken før eller efter. Nogle tilfælde hvor en indlejret widget slår et link, der sender læseren væk:
- Undervisningssider. En lærer der skriver “øv denne skala ved 80 BPM” kan placere metronomen lige under øvelsen, klar når eleven scroller derhen.
- Becifringer og noder. Vis stykkets tempo ved siden af noderne, så musikeren rammer det rigtige tempo med det samme.
- Øverutiner. Et indlæg om at opbygge hastighed kan koble hvert trin til det værktøj, læseren skal bruge for at øve.
- Websteder for bands og studier. Et lille værktøj der holder besøgende længere på siden og giver dem en grund til at komme igen.
Fordi widgetten lever inde i en iframe, blander den sig aldrig i resten af din side. Den læser ikke dit indhold, ændrer ikke dit websteds URL og indlæses helt af sig selv.
Prøv den lige her
Det er præcis det samme kodestykke som ovenfor, indlæst direkte på denne side. Brug knapperne til at se den i lyst eller mørkt tema — koden nedenfor opdateres, så den matcher. Tryk på Start, træk i tempoet, eller brug Tap Tempo i takt med en sang.
Powered by pluri.tools
Alt du ser ovenfor, inklusive det lille attributionslink, er præcis det, besøgende på dit websted ser, så snart du indsætter koden.
Tilpas farverne til dit websted
Som standard følger widgetten den besøgendes systemtema (lyst eller mørkt). Har din side et fast udseende, kan du gennemtvinge temaet med parameteren theme i URL’en:
<!-- Altid mørkt -->
<iframe src="https://pluri.tools/embed/da/metronom?theme=dark" ...></iframe>
<!-- Altid lyst -->
<iframe src="https://pluri.tools/embed/da/metronom?theme=light" ...></iframe>Til bredden begrænser containeren widgetten til max-width:440px, mens iframen fylder den med width="100%", så den fylder smalle kolonner på mobil uden at strække sig underligt bredt på desktop. Ret containerens max-width, hvis dit layout er smallere, og dens border-radius, så den matcher dine andre kort.
Widgetten findes også på 13 sprog. Erstat da i stien med det sprog, du vil have, for eksempel /embed/en/metronome for engelsk eller /embed/de/metronom for tysk. Hvert sprog har sin egen slug i URL’en, så brug den, der matcher.
Ingen rullebjælke mere: lad iframen skifte størrelse selv
Det mest irriterende ved enhver iframe er den faste højde. For lav, og kontrollerne bliver skåret af; for høj, og der er tomt rum tilbage. Indlejringen løser det ved at rapportere sin faktiske højde til den overordnede side, hver gang den ændrer sig. Du skal blot lytte efter den besked og tilpasse rammens størrelse.
Giv iframen et id, og tilføj dette lille script én gang, et vilkårligt sted på siden:
<iframe
id="metronom-embed"
src="https://pluri.tools/embed/da/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>Nu vokser og krymper rammen selv efter indholdet, uden nogensinde at vise en rullebjælke. Springer du scriptet over, er den faste højde height="600" stadig en sikker standardværdi, der rummer hele widgetten.
Bemærkninger pr. platform
De fleste hjemmesidebyggere behandler <iframe>-kode anderledes end almindelig tekst. Reglen er enkel: indsæt den i en HTML- eller indlejringsblok, aldrig i den visuelle editor, som ofte fjerner iframes.
| Platform | Hvor koden skal indsættes |
|---|---|
| WordPress (blokeditor) | Tilføj en Brugerdefineret HTML-blok, og indsæt iframen. Den visuelle afsnitseditor fjerner den. |
| Wix | Tilføj elementet Indlejr HTML (Indlejr en widget), og indsæt koden. |
| Webflow | Træk et Embed-element ind, og indsæt iframen. |
| Notion | Indsæt den enkle URL https://pluri.tools/embed/da/metronom, og vælg Opret indlejring. |
| Blogger | Skift til HTML-visning, mens du redigerer opslaget, og indsæt iframen direkte i koden. |
| Ren HTML | Indsæt den et vilkårligt sted inde i <body>. |
Almindelige fejl
- At indsætte i den formaterede teksteditor. Forsvinder widgetten, når du gemmer, brugte du den forkerte blok. Skift til Brugerdefineret HTML eller Kode.
- En højde der skærer knapperne af. Kontrollerne Start og Tap Tempo sidder tæt på bunden. Hold højden på mindst 600, eller brug scriptet til automatisk størrelsestilpasning ovenfor.
- At tro der skal endnu et bibliotek til. Widgetten kræver intet ekstra script for at fungere. Det eneste valgfrie script er højdelytteren.
- At blande http og https. Indlejr altid via
https. Koden i denne guide bruger det allerede.
Hvad indlejringen indeholder
Kodestykket indeholder et lille link “Powered by pluri.tools”, lige under widgetten, der fører tilbage til værktøjet. Det link er det eneste, indlejringen beder om til gengæld, og det er sådan, metronomen forbliver gratis. Den, der vil have hele siden, med alle 13 sprog og delbare tempo-URL’er, kan følge det.
Ofte stillede spørgsmål
Er den virkelig gratis?
Ja. Der skal ikke bruges konto, API-nøgle eller nogen brugsgrænse. Kodestykket indeholder kun et attributionslink, ikke andet.
Gør den mit websted langsommere?
Iframen bruger loading="lazy", så browseren indlæser den først, når den ruller ind i visningen. Widgetten selv er let og genererer lyden med Web Audio API, uden lydfiler der skal downloades.
Kan besøgende ændre tempoet, eller er det fast?
Den er fuldt interaktiv. Alle der ser din side, kan indstille et vilkårligt BPM fra 20 til 300, skifte taktart, vælge lyd og bruge Tap Tempo. Indlejringen åbner ved 120 BPM.
Virker den på mobil?
Ja. Widgetten er responsiv, og lyden virker på iOS og Android. På iOS spiller den gennem højttaleren, selv med lydløs-kontakten slået til, så snart nogen trykker på Start.
Kan jeg skifte sprog?
Ja. Erstat da i URL’en med et af de 13 understøttede sprog, med det sprogs slug, for eksempel /embed/no/metronom for norsk eller /embed/sv/metronom for svensk.