Gratis Metronoom op je Website Insluiten
Heb je een muziekblog, een site voor privélessen of een pagina vol tabs, dan kun je een werkende metronoom toevoegen zonder er zelf een te bouwen. Kopieer één klein stukje code, plak het op je pagina, en er verschijnt een volledige metronoom: tempo van 20 tot 300 BPM, tap tempo, keuze uit maatsoorten en drie klikgeluiden. Alles draait volledig in de browser van de bezoeker, dus er hoeft niets geïnstalleerd te worden en er is geen account nodig.
Dit is alles.
<div style="max-width:440px;margin:0 auto;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
<iframe src="https://pluri.tools/embed/nl/metronoom" title="Metronoom — pluri.tools" width="100%" height="600" style="border:0;display:block;width:100%" loading="lazy"></iframe>
<a href="https://pluri.tools/nl/metronoom/" 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>Dat is de hele integratie. De rest van deze gids laat zien hoe je hem aan je eigen ontwerp aanpast, hoe je hem in WordPress, Wix of Notion plakt, en een trucje zodat de iframe nooit een scrollbalk toont.
Waarom een metronoom op je pagina zetten
Een metronoom is een van die tools die mensen precies zoeken op het moment dat ze jouw content lezen, niet ervoor en niet erna. Een paar situaties waarin een ingesloten widget beter werkt dan een link die de lezer wegstuurt:
- Lespagina’s. Een docent die schrijft “oefen deze toonladder op 80 BPM” kan de metronoom direct onder de oefening zetten, klaar zodra de leerling er scrollt.
- Songteksten en bladmuziek. Toon het tempo van het stuk naast de notatie, zodat de muzikant meteen in het juiste tempo begint.
- Oefenroutines. Een artikel over rustig sneller worden kan bij elke stap de tool zetten die de lezer nodig heeft om te oefenen.
- Band- en studiowebsites. Een klein hulpmiddel dat bezoekers langer op je pagina houdt en ze een reden geeft om terug te komen.
Omdat de widget in een iframe leeft, bemoeit hij zich nooit met de rest van je pagina. Hij leest je content niet, verandert je website-URL niet en laadt zelfstandig.
Probeer het hier
Dit is exact dezelfde snippet als de code hierboven, live geladen op deze pagina. Gebruik de knoppen om hem in licht of donker te bekijken; de code hieronder past zich automatisch aan. Druk op Starten, sleep aan het tempo of gebruik Tap Tempo op het ritme van een nummer.
Powered by pluri.tools
Alles wat je hierboven ziet, inclusief het kleine attributielinkje, is precies wat bezoekers van je site zien zodra je de code plakt.
Kleuren afstemmen op je site
Standaard volgt de widget het systeemthema van de bezoeker (licht of donker). Heeft je pagina een vaste stijl, forceer het thema dan met de theme-parameter in de URL:
<!-- Altijd donker -->
<iframe src="https://pluri.tools/embed/nl/metronoom?theme=dark" ...></iframe>
<!-- Altijd licht -->
<iframe src="https://pluri.tools/embed/nl/metronoom?theme=light" ...></iframe>Voor de breedte beperkt de container de widget tot max-width:440px terwijl de iframe hem vult met width="100%", zodat hij smalle kolommen op mobiel vult zonder op desktop onnodig breed te worden. Pas de max-width van de container aan als je layout krapper is, en de border-radius ervan om hem bij je andere kaarten te laten passen.
De widget is er ook in 13 talen. Vervang de nl in het pad door de gewenste taal, bijvoorbeeld /embed/en/metronome voor Engels of /embed/de/metronom voor Duits. Elke taal heeft zijn eigen slug in de URL, gebruik dus de juiste.
Geen scrollbalk meer: laat de iframe zichzelf resizen
Het vervelendste aan elke iframe is de vaste hoogte. Te laag, en bedieningselementen worden afgesneden; te hoog, en er blijft lege ruimte over. De embed lost dit op door bij elke wijziging zijn echte hoogte aan de bovenliggende pagina door te geven. Je hoeft alleen naar dat bericht te luisteren en het frame aan te passen.
Geef de iframe een id en voeg dit korte script eenmaal ergens op je pagina toe:
<iframe
id="metronoom-embed"
src="https://pluri.tools/embed/nl/metronoom"
title="Metronoom — 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('metronoom-embed')
if (frame) frame.style.height = event.data.height + 'px'
}
})
</script>Nu groeit en krimpt het frame vanzelf mee met de inhoud, zonder ooit een scrollbalk te tonen. Sla je het script over, dan is de vaste hoogte height="600" een veilige standaardwaarde die de hele widget laat passen.
Opmerkingen per platform
De meeste websitebouwers behandelen <iframe>-code anders dan gewone tekst. De regel is simpel: plak het in een HTML- of embedblok, nooit in de visuele editor, die iframes vaak verwijdert.
| Platform | Waar je de code plakt |
|---|---|
| WordPress (blokeditor) | Voeg een blok Aangepaste HTML toe en plak de iframe. De visuele alineaeditor verwijdert hem. |
| Wix | Voeg het element HTML insluiten toe (Widget insluiten) en plak de code. |
| Webflow | Sleep een Embed-element neer en plak de iframe. |
| Notion | Plak de eenvoudige URL https://pluri.tools/embed/nl/metronoom en kies Insluiting maken. |
| Blogger | Schakel bij het bewerken van je bericht naar HTML-weergave en plak de iframe direct in de code. |
| Losse HTML | Plak hem ergens binnen de <body>. |
Veelgemaakte fouten
- Plakken in de rich-text-editor. Verdwijnt de widget bij het opslaan, dan gebruikte je het verkeerde blok. Schakel over naar Aangepaste HTML of Code.
- Een hoogte die knoppen afsnijdt. De knoppen Starten en Tap Tempo staan dicht bij de onderkant. Houd de hoogte op minimaal 600, of gebruik het autoresizescript hierboven.
- Denken dat er nog een library nodig is. De widget heeft zelf geen extra script nodig om te werken. Het enige optionele script is de hoogte-listener.
- Http en https door elkaar halen. Sluit altijd in via
https. De code in deze gids gebruikt dat al.
Wat de embed bevat
De snippet bevat een kleine link “Powered by pluri.tools”, vlak onder de widget, die terugleidt naar de tool. Die link is het enige wat de embed terugvraagt, en zo blijft de metronoom gratis. Wie de volledige pagina wil, met alle 13 talen en deelbare tempo-URL’s, kan hem volgen.
Veelgestelde vragen
Is het echt gratis?
Ja. Geen account nodig, geen API-sleutel en geen gebruikslimiet. De snippet bevat alleen een attributielink, verder niets.
Wordt mijn site er trager van?
De iframe gebruikt loading="lazy", dus de browser laadt hem pas als hij in beeld scrollt. De widget zelf is licht en genereert het geluid met de Web Audio API, zonder audiobestanden te downloaden.
Kunnen bezoekers het tempo aanpassen, of ligt het vast?
Hij is volledig interactief. Iedereen die je pagina bekijkt, kan elke BPM tussen 20 en 300 instellen, van maatsoort wisselen, een geluid kiezen en Tap Tempo gebruiken. De embed opent op 120 BPM.
Werkt hij op de telefoon?
Ja. De widget is responsive en audio werkt op iOS en Android. Op iOS speelt hij via de speaker, zelfs met de stille schakelaar aan, zodra iemand op Starten drukt.
Kan ik de taal wijzigen?
Ja. Vervang de nl in de URL door een van de 13 ondersteunde talen, met de slug van die taal, bijvoorbeeld /embed/pl/metronom voor Pools of /embed/tr/metronom voor Turks.