Så Bäddar du in en Gratis Metronom på din Webbplats
Driver du en musikblogg, en sida för privatlektioner eller en sida full av ackordscheman kan du lägga till en fungerande metronom utan att bygga en själv. Kopiera ett litet kodavsnitt, klistra in det på sidan, och en komplett metronom dyker upp: tempo från 20 till 300 BPM, tap tempo, val av taktart och tre klickljud. Allt körs direkt i besökarens webbläsare, så det finns inget att installera och inget konto att skapa.
Det här är hela grejen.
<div style="max-width:440px;margin:0 auto;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
<iframe src="https://pluri.tools/embed/sv/metronom" title="Metronom — pluri.tools" width="100%" height="600" style="border:0;display:block;width:100%" loading="lazy"></iframe>
<a href="https://pluri.tools/sv/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 är hela integrationen. Resten av guiden visar hur du anpassar den efter din design, hur du klistrar in den i WordPress, Wix eller Notion, och ett knep för att iframen aldrig ska visa en rullningslist.
Varför lägga en metronom på din sida
En metronom är ett av de verktyg folk letar efter precis när de läser ditt innehåll, varken innan eller efter. Några fall där en inbäddad widget slår en länk som skickar bort läsaren:
- Lektionssidor. En lärare som skriver “öva den här skalan i 80 BPM” kan placera metronomen direkt under övningen, redo när eleven scrollar dit.
- Ackordscheman och notblad. Visa styckets tempo bredvid notationen så musikern kommer in i rätt tempo direkt.
- Övningsrutiner. Ett inlägg om att bygga upp hastighet kan koppla varje steg till verktyget läsaren behöver för att öva.
- Band- och studiosajter. Ett litet verktyg som håller kvar besökare längre på sidan och ger dem en anledning att komma tillbaka.
Eftersom widgeten lever inuti en iframe stör den aldrig resten av din sida. Den läser inte ditt innehåll, ändrar inte din webbplats URL och laddas helt själv.
Testa direkt här
Det här är exakt samma kodavsnitt som ovan, laddat live på den här sidan. Använd knapparna för att se den i ljust eller mörkt läge — koden nedan uppdateras för att matcha. Tryck på Starta, dra i tempot eller använd Tap Tempo i takt med en låt.
Powered by pluri.tools
Allt du ser ovan, inklusive den lilla attributionslänken, är exakt vad besökare på din webbplats ser så fort du klistrar in koden.
Matcha färgerna med din sida
Som standard följer widgeten besökarens systemtema (ljust eller mörkt). Har din sida en fast stil kan du tvinga fram temat med parametern theme i URL:en:
<!-- Alltid mörkt -->
<iframe src="https://pluri.tools/embed/sv/metronom?theme=dark" ...></iframe>
<!-- Alltid ljust -->
<iframe src="https://pluri.tools/embed/sv/metronom?theme=light" ...></iframe>För bredden begränsar behållaren widgeten till max-width:440px medan iframen fyller den med width="100%", så att den fyller smala kolumner på mobil utan att sträckas ut konstigt på datorn. Ändra behållarens max-width om din layout är smalare, och dess border-radius för att matcha dina andra kort.
Widgeten finns också på 13 språk. Byt ut sv i sökvägen mot språket du vill ha, till exempel /embed/en/metronome för engelska eller /embed/de/metronom för tyska. Varje språk har sin egen slug i URL:en, så använd den som matchar.
Ingen rullningslist längre: låt iframen storleksändra sig själv
Det jobbigaste med alla iframes är den fasta höjden. För låg och kontrollerna klipps av, för hög och det blir tomt utrymme kvar. Inbäddningen löser det genom att rapportera sin riktiga höjd till den överordnade sidan varje gång den ändras. Du behöver bara lyssna på det meddelandet och anpassa ramens storlek.
Ge iframen ett id och lägg till det här korta skriptet en gång, var som helst på sidan:
<iframe
id="metronom-embed"
src="https://pluri.tools/embed/sv/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 växer och krymper ramen själv efter innehållet, utan att någonsin visa en rullningslist. Hoppar du över skriptet fungerar den fasta höjden height="600" fortfarande som ett säkert standardvärde som rymmer hela widgeten.
Anteckningar per plattform
De flesta hemsidebyggare hanterar <iframe>-kod annorlunda än vanlig text. Regeln är enkel: klistra in den i ett HTML- eller inbäddningsblock, aldrig i den visuella redigeraren, som ofta tar bort iframes.
| Plattform | Var koden ska klistras in |
|---|---|
| WordPress (blockredigerare) | Lägg till ett block för Anpassad HTML och klistra in iframen. Den visuella styckeredigeraren tar bort den. |
| Wix | Lägg till elementet Bädda in HTML (Bädda in en widget) och klistra in koden. |
| Webflow | Dra in ett Embed-element och klistra in iframen. |
| Notion | Klistra in den enkla URL:en https://pluri.tools/embed/sv/metronom och välj Skapa inbäddning. |
| Blogger | Växla till HTML-vy när du redigerar inlägget och klistra in iframen direkt i koden. |
| Ren HTML | Klistra in den var som helst inuti <body>. |
Vanliga misstag
- Klistra in i den formaterade textredigeraren. Försvinner widgeten när du sparar använde du fel block. Byt till Anpassad HTML eller Kod.
- En höjd som klipper av knapparna. Kontrollerna Starta och Tap Tempo sitter nära botten. Håll höjden på minst 600, eller använd skriptet för automatisk storleksändring ovan.
- Att tro att ett till bibliotek behövs. Widgeten behöver inget extra skript för att fungera. Det enda valfria skriptet är höjdlyssnaren.
- Blanda http och https. Bädda alltid in via
https. Koden i den här guiden använder det redan.
Vad inbäddningen inkluderar
Kodavsnittet innehåller en liten länk “Powered by pluri.tools”, precis under widgeten, som leder tillbaka till verktyget. Den länken är det enda inbäddningen begär i gengäld, och det är så metronomen förblir gratis. Den som vill ha hela sidan, med alla 13 språk och delbara tempo-URL:er, kan följa den.
Vanliga frågor
Är den verkligen gratis?
Ja. Inget konto, ingen API-nyckel och ingen användningsgräns behövs. Kodavsnittet innehåller bara en attributionslänk, inget annat.
Kommer den att sakta ner min sida?
Iframen använder loading="lazy", så webbläsaren laddar den först när den rullas in i vy. Widgeten i sig är lättviktig och genererar ljudet med Web Audio API, utan några ljudfiler att ladda ner.
Kan besökare ändra tempot, eller är det fast?
Den är helt interaktiv. Alla som tittar på din sida kan ställa in valfritt BPM från 20 till 300, byta taktart, välja ljud och använda Tap Tempo. Inbäddningen öppnas på 120 BPM.
Fungerar den på mobilen?
Ja. Widgeten är responsiv och ljudet fungerar på iOS och Android. På iOS spelas ljudet genom högtalaren även med ljudlös-knappen på, så fort någon trycker på Starta.
Kan jag byta språk?
Ja. Byt ut sv i URL:en mot något av de 13 språken som stöds, med det språkets slug, till exempel /embed/no/metronom för norska eller /embed/da/metronom för danska.