How to Embed a Free Metronome on Your Website

If you run a music blog, a teaching site, or a page full of guitar tabs, you can give visitors a working metronome without building one. Copy one small snippet, paste it into your page, and a full metronome appears: tempo from 20 to 300 BPM, tap tempo, time signatures, and three click sounds. It runs entirely in the visitor’s browser, so there is nothing to install and no account to create.

Here is the whole thing.

<div style="max-width:440px;margin:0 auto;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
  <iframe src="https://pluri.tools/embed/en/metronome" title="Metronome — pluri.tools" width="100%" height="600" style="border:0;display:block;width:100%" loading="lazy"></iframe>
  <a href="https://pluri.tools/en/metronome/" 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>

That is the entire integration. The rest of this guide explains how to make it fit your design, how to platform it on WordPress or Squarespace, and one trick to stop the iframe from ever showing a scrollbar.

Why put a metronome on your page

A metronome is one of those tools people look for at the exact moment they are reading your content, not before and not after. A few cases where an inline widget beats a link that sends the reader away:

• Lesson pages. A teacher explaining “practice this scale at 80 BPM” can drop the metronome right under the exercise, already there when the student scrolls to it.
• Song tabs and sheet music. Show the tempo of the piece next to the notation so players can lock in before they start.
• Practice routines. A post about building speed can pair each step with the tool the reader needs to do it.
• Band and studio sites. A small utility that keeps visitors on your page longer and gives them a reason to come back.

Because the widget lives in an iframe, it never interferes with your page. It cannot read your content, it will not change your URL, and it loads on its own.

Try it right here

This is the exact snippet from above, loaded live on this page. Use the switch to preview it in light or dark, and the code below updates to match. Press Start, drag the tempo, or tap the tempo button in time with a song.

Everything you see above, including the small attribution link, is exactly what a visitor sees on your site the moment you paste the snippet in.

Match your site’s colors

The widget follows the visitor’s system theme by default (light or dark). If your page is committed to one look, force it with a theme parameter on the URL:

<!-- Always dark -->
<iframe src="https://pluri.tools/embed/en/metronome?theme=dark" ...></iframe>

<!-- Always light -->
<iframe src="https://pluri.tools/embed/en/metronome?theme=light" ...></iframe>

For width, the wrapper caps the widget at max-width:440px while the iframe fills it at width="100%", so it fits narrow columns on mobile but never stretches awkwardly wide on desktop. Change the wrapper’s max-width if your layout is tighter, and adjust its border-radius to match your other cards.

The widget also comes in 13 languages. Swap the en in the path for the language you want, for example /embed/es/metronomo for Spanish or /embed/de/metronom for German. Each language has its own slug, so use the one that matches.

Stop the scrollbar: auto-resize the iframe

A fixed height is the one rough edge of any iframe. Set it too short and controls get clipped, too tall and you get empty space. The embed solves this by reporting its real height to the parent page every time it changes. You can listen for that message and size the frame to fit.

Give the iframe an id, then add this small script once anywhere on your page:

<iframe
  id="metronome-embed"
  src="https://pluri.tools/embed/en/metronome"
  title="Metronome — 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('metronome-embed')
      if (frame) frame.style.height = event.data.height + 'px'
    }
  })
</script>

Now the frame grows and shrinks to match its content, and no scrollbar ever appears. If you skip the script, the fixed height="600" is a safe default that fits the full widget on its own.

Platform notes

Most site builders treat raw <iframe> code differently from ordinary text. The rule is simple: paste it into an HTML or embed block, never the visual editor, which tends to strip iframes out.

Platform	Where the code goes
WordPress (block editor)	Add a Custom HTML block and paste the iframe. The visual paragraph editor will remove it.
Squarespace	Use a Code block. The generic Embed block can reject a bare iframe.
Wix	Add the Embed HTML element (Embed a Widget), then paste the code.
Webflow	Drop an Embed element and paste the iframe.
Notion	Paste the plain URL https://pluri.tools/embed/en/metronome and choose Create embed.
Plain HTML	Paste it anywhere inside the <body>.

On WordPress.com specifically, custom HTML with iframes needs a plan that allows it. Self-hosted WordPress has no such limit.

Common mistakes

• Pasting into the rich-text editor. If the widget disappears when you save, you used the wrong block. Switch to a Custom HTML or Code block.
• A height that clips the buttons. The Start and tap controls sit near the bottom. Keep the height at 600 or more, or use the auto-resize script above.
• Forgetting it is self-contained. You do not need to add any library or script for the widget itself to work. The only optional script is the resize listener.
• Mixing http and https. Always embed over https. The snippet already uses it.

What the embed includes

The snippet includes a small “Powered by pluri.tools” link back to the tool, sitting just below the widget. That link is the only thing the embed asks of you, and it is how the metronome stays free. Visitors who want the full page, with all 13 languages and shareable tempo URLs, can follow it.

Frequently asked questions

Is it really free?

Yes. There is no account, no API key, and no usage limit. The snippet includes a single attribution link and nothing else.

Will it slow down my page?

The iframe uses loading="lazy", so the browser only loads it when it scrolls into view. The widget itself is lightweight and generates its sound with the Web Audio API, with no audio files to download.

Can visitors change the tempo, or is it fixed?

It is fully interactive. Anyone viewing your page can set any BPM from 20 to 300, switch the time signature, pick a sound, and use tap tempo. The embed opens at 120 BPM.

Does it work on phones?

Yes. The widget is responsive and the audio works on iOS and Android. On iOS it plays through the speaker even with the mute switch on, once the visitor presses Start.

Can I change the language?

Yes. Replace en in the URL with any of the 13 supported languages, using that language’s slug, for example /embed/fr/metronome or /embed/ja/metronomu.