A click you can start in one tap. Tap the lights to move the accents, which is how 7/8 becomes 3+2+2, and the L size adds the odd meters, the subdivision, four sounds and a volume.
Embeddable metronome widget
A free metronome, ready to paste into any page, and eleven more cards that embed the same way: a tuner, a circle of fifths, a drum loop and the rest. Each one is an iframe: nothing to install, no account needed. Under the frame sits a small link back to eMusic.Tools, the one thing it asks for in return.
- One iframe, no script
- Works on phones
- Follows light and dark mode
- English, Spanish, Polish
<iframe src="emusic.tools/embed/metronome">
Metronome
4/4 · Allegroemusic.tools120BPM
4/4 · ♩ = 120 · Allegro
Meter
Subdivision
Click
80%
<section #sizes>
One card, four sizes
A size sets how much of the tool fits in the card. The layout follows the width it gets, from a phone column to a wide article.
S, the tile
The tool's main control with its readout, and a nudge or two. Sized for a sidebar or a narrow column.
M, the core
The control, plus the two adjustments the tool always needs.
L, the console
The tool itself, short of saving, exporting and the page around it.
XL, the tool
Not a card that behaves like the tool. The tool: the same console the tool page mounts, saving and export included.
<section #embed>
Add the metronome to your page
Pick a widget and a size, try it in the preview, then copy the fragment.
- 1Copy the snippet below.
- 2Paste it into your page (see the instructions for your platform).
- 3Publish. The widget and the link appear together.
metronome-m.html
<!-- eMusic Tools · metronome -->
<iframe src="https://emusic.tools/embed/metronome?v=1&lang=en&theme=auto&size=m" title="Free online metronome" width="100%" height="220" style="max-width:560px;border:0;border-radius:12px" loading="lazy" allow="autoplay"></iframe>
<p style="margin:6px 0 0;font:12px/1.4 system-ui,sans-serif">
<a href="https://emusic.tools/en/tools/metronome?utm_source=embed&utm_medium=widget&utm_campaign=metronome">Free online metronome</a> by <a href="https://emusic.tools/?utm_source=embed&utm_medium=widget">eMusic Tools</a>
</p>your-site.com/lessons/keeping-time
Free online metronome by eMusic Tools
The preview loads the same address the fragment points to.
<section #gallery>
More widgets
Every card here embeds the same way as the metronome. Press “Embed” under one and its fragment appears above.
M, the core. The control, plus the two adjustments the tool always needs.
The microphone, filtered and matched against the tuning rather than against the nearest note, so a bass E an octave out still reads as the E string. M adds the tunings and a tone on every string, and L the reference pitch.
One interval, four answers, from the trainer's own generator, so the pool and the wrong answers are the ones /tools/ear-training uses. L opens the difficulty and whether the notes arrive up, down or together.
One note on a stave, four answers. M adds the score, the streak and hearing what you were asked to name; L opens the clef, eight key signatures and the ledger lines, which are the part nobody practises.
Opens on the chord of the day and turns into a chord finder: twelve roots, twelve qualities, inversions on the keyboard, and the guitar shapes one after another.
Twelve keys outside, their relative minors inside. The key's signature and its seven chords come from the same registry the key pages are built from, and every chord plays.
A different scale every day, spelled the way its own page spells it. M puts it on a keyboard with the step pattern that defines it; L opens every root and thirty-six types, the degrees you can tap one at a time, and the chords the scale hands you.
One bar, four presets and cells big enough to hit with a thumb. M is the eighth-note reading of the pattern; L opens all sixteen steps, four kits, swing and a mute on every row.
Nine sounds you hit rather than place on a grid. S shows the four a beat is made of; M adds the rest and the seven kits; L records what you played, to the millisecond, and loops it back.
A loop to practise over: chords, a bass and a kit, in any key. M adds the tempo and the twelve keys; L opens fifty-one progressions across eight groups, four comping gestures, a walking bass, four kits and the swing a neo-soul pack arrives with.
Seven progressions in any of twelve keys, major or minor, with the chords spelled the way the key spells them. L adds the tempo, the voicing and a loop.
Tap four beats and read the tempo, with a ± that says whether to trust it. L prints the note lengths in milliseconds, halves and doubles the pulse, and hands the tempo to the metronome.
How to add it
WordPress
Add a Custom HTML block wherever the widget should sit, paste the snippet, and preview the page. The block takes the iframe and the link beneath it as they are.
Terms
You can embed this widget on any site, personal or commercial, for free. The watermark and the link under the frame stay in place: that's the price of a free tool. We may change or retire a widget, always with 30 days' notice. The address you pasted always shows the current version, so a change reaches your page without you touching the snippet. We don't guarantee the frame will look identical in every browser or that it will run without interruption. Something broken or off on your page? Get in touch.
<section #faq>
Questions
Does it work on phones?
Yes. The frame follows the width of whatever column it sits in, down to about 220px, so it narrows along with the rest of the page on a phone. Sound only starts once someone taps the button inside the frame, mobile browsers don't allow anything before that.
Do I need to add a script?
No. The whole snippet is one iframe and one link underneath it, no script tag. It works even where a CMS strips scripts out of post content.
Does the tuner work inside a frame?
Yes. The tuner's fragment carries allow="microphone", so the reader's browser asks for the microphone the first time they tap it. If your site builder strips that attribute, the tuner says it has no microphone instead of listening.
Why is there a link under the frame?
Because a watermark inside an iframe doesn't count as a link to a search engine, an iframe doesn't pass SEO value across the boundary. A visible link under the frame is the only way this widget actually points back to our site, rather than just looking like it does.
Can I remove the watermark?
No. It stays on every embed, with or without an account: it's what keeps the brand visible even if someone cuts the link out.
Can I change the colors?
The frame has a light and a dark theme, picked automatically from the visitor's system setting (`theme=auto`), or fixed in the address. There's no custom color palette.
What about GDPR?
The frame doesn't store any personal data, doesn't set cookies, doesn't read `localStorage`. We only record that someone ran the widget on a given domain, without a plain IP address, so we can tell which sites actually use it.
Paste it once
The fragment points at our address, so when the widget gets better, the one on your page does too.