MetronoTuner
Guitar Standard
en

Install it as an app

It opens full screen, like an app, and works offline.

  1. Tap Share in the browser bar.
  2. Scroll down and tap “Add to Home Screen” .
  3. Tap “Add”. The icon shows up on your home screen.

Metronome and tuner for your website

To embed a metronome on your website, pick the options below, tap “Copy code” and paste the code into an HTML block on your page. The tuner works the same way. It is free, needs no sign-up, and the widget shows no ads.

Build your widget

Tool
Size

Compact shows just the essentials; full includes every option of the tool.

Theme
Tempo (BPM)
Widget language

Preview

The link under the widget points to MetronoTuner. You can remove it, but it helps keep the project free.

How to add it to your site

Copy the code from the builder above and paste it into your platform:

WordPress

  1. Open the page or post in the editor.
  2. Tap + and choose the “Custom HTML” block.
  3. Paste the code and publish.

Wix

  1. In the editor, tap “Add Elements” (+) › “Embed Code” › “Embed HTML”.
  2. Choose “Code”, paste it and tap “Update”.
  3. Resize the box until the whole widget fits.

Blogger

  1. In the post editor, switch to “HTML view”.
  2. Paste the code where the widget should appear and switch back to the normal view.
  3. For the sidebar: “Layout” › “Add a Gadget” › “HTML/JavaScript”.

Notion

  1. Here, tap “Copy the address only” (Notion does not accept HTML code).
  2. On your Notion page, type /embed and choose “Embed”.
  3. Paste the address and confirm.

HTML

  1. Paste the code inside <body>, at the spot where the widget should appear.
  2. The widget fills the available width, up to the maximum set in the code.

If you prefer to edit the code

The widget address accepts these parameters, the same in every language (names and values stay exactly like this, untranslated):

bpm
Metronome tempo, from 30 to 250. Example: bpm=90
compasso
Time signature and accent grouping. Example: compasso=7/8:2+2+3
instrumento
Tuner instrument (without it, the tuner is chromatic). Example: instrumento=ukulele
afinacao
Instrument tuning (without it, standard). Example: afinacao=drop-d
tema
claro (light), escuro (dark) or auto (follows the device). Example: tema=escuro
tamanho
compacto shows just the essentials. Example: tamanho=compacto
fundo
transparente lets your site’s background show through. Example: fundo=transparente

The full tools

Frequently asked questions

Is the widget free?

Yes. Any site can use it: a blog, a teacher’s site, a school or a band. The widget shows no ads and needs no account.

Does it work on phones?

Yes. The widget adapts to the screen width and works in phone, tablet and desktop browsers.

Do I need to sign up?

No. Just copy the code and paste it on your site: no account, no key, no login.

Does the microphone work inside the widget?

Yes, in the tuner. The code already includes allow="microphone", which enables the microphone inside the iframe, and the first time the browser asks the visitor for permission. The sound is analysed on the device and is never recorded or sent. Your site must use HTTPS; on platforms that wrap the code in another frame, such as Wix and Notion, the browser may block the microphone.

Can I change the colours?

You can choose the light theme, the dark theme or automatic, which follows the visitor’s device, and make the background transparent so the widget blends into your site. The button colours are MetronoTuner’s.

Will the widget slow my site down?

No. The code uses loading="lazy": the widget only loads when it gets close to the screen. Sound and microphone analysis run on the visitor’s device.