Put a Free Metronome on Your Own Website

If you teach, run a studio, or keep a resources page for your students, sending them off to a third-party site mid-lesson is a small friction that adds up. These widgets put the tool on your page instead. They are the same tools that run on this site, not cut-down versions, and they are free to use on any site, commercial or not.

<iframe src="https://metrognome.co.za/embed/odd-meter.html"
        width="100%" height="780" style="border:0;max-width:480px"
        title="Odd meter metronome by Metro Gnome"
        loading="lazy"></iframe>

<iframe src="https://metrognome.co.za/embed/tap-tempo.html"
        width="100%" height="560" style="border:0;max-width:480px"
        title="Tap tempo BPM finder by Metro Gnome"
        loading="lazy"></iframe>

<iframe src="https://metrognome.co.za/embed/rhythm-test.html"
        width="100%" height="645" style="border:0;max-width:480px"
        title="Rhythm timing test by Metro Gnome"
        loading="lazy"></iframe>

Sizing and placement

The heights in the code above are measured at a widget width of 480 pixels, which is what max-width:480px in the snippet gives you. Everything inside scales to the width you allow, so leaving width="100%" and letting your own container decide is usually easiest.

Narrower means taller, because the controls wrap onto more rows. Measured heights at a 300 pixel sidebar width, if you want to size one exactly:

Getting it wrong is not fatal either way. Each widget scrolls inside its own frame when the frame is shorter than its contents, so nothing is ever cut off, you just get a scrollbar.

Terms, in plain English

• Free to embed on any website, including commercial sites and paid course platforms.
• Keep the credit link that ships inside the widget. Do not remove or hide it.
• Do not copy the tool's code onto your own server. Point the iframe here so you always get fixes and improvements.
• No warranty. These are practice aids, not measurement instruments, and browser audio timing varies by device.

Questions

Is it really free?

Yes. No cost, no sign up, no API key. Metro Gnome is a free Android app funded by optional cosmetic purchases and a one-time ad removal, and these tools exist because they are useful, not as a trial for something paid.

Will it slow my page down?

No. Each widget is one small HTML page with no external libraries, no tracking scripts and no web fonts. The embed code includes loading="lazy", so a widget below the fold does not load until a visitor scrolls near it.

Does it work on phones?

Yes, on any modern mobile or desktop browser. Sound uses the Web Audio API, so a visitor taps once to start audio, which is standard browser behaviour and applies to every audio tool on the web.

Can I request a different tool?

Yes, and it is genuinely useful to hear what is missing. Email what you would use and it will be considered for the next one.