The Ultimate Piano
Your Piano Practice Partner

Free Metronome Widget for Your Website

This free metronome widget adds drum rhythms, tap tempo, and visual beat display to any website. Two lines of code, no signup, no API key. Works on music blogs, teaching sites, and tutorial pages.

Embed Code

<script src="https://app.the-ultimate-piano.com/metronome.js"></script> <div id="up-metronome"></div>

Two lines. The script renders the metronome and adds an attribution badge automatically. Works on any platform that supports HTML embeds — WordPress, Squarespace, Wix, Webflow, static HTML.

How to Add It
WordPress

Block Editor (Gutenberg)

Click the + button to add a block. Search for Custom HTML. Paste the two-line embed code into the block. Click Preview to see the metronome live. Publish or update the page.

WordPress

Elementor

Drag an HTML widget onto your page. Paste the two-line embed code. The metronome appears after you publish or preview the page. Save and publish.

Squarespace

Code Block

Edit the page and click Add Block → Code. Paste the two-line embed code. Make sure the Display Source toggle is off. Save the page.

Wix

HTML Embed

Click Add Elements → Embed Code → Embed HTML. Switch to Code mode and paste the two-line embed code. Resize the element to 400 × 700 pixels. Publish.

What’s Included
01

Real Drum Grooves

The widget plays a classic metronome click or a real drum groove — one groove each for 4/4, 3/4, 6/8 and 12/8 is included. The full library across Jazz, Rock, Blues, Funk, Country and more comes with The Ultimate Piano Premium. Every groove follows the BPM setting automatically.

See all rhythms →
02

Visual Beat Display

An animated equalizer visualizer shows each beat in the measure. Main beats display numbers, subdivisions show "+". The current beat lights up in sync with the audio — helping musicians internalize the pulse visually while practicing.

03

BPM, Time Signatures & Subdivisions

Full control: 20–400 BPM, 6 time signatures (4/4, 3/4, 2/4, 5/4, 6/8, 12/8), and 4 subdivision types (quarter, eighth, triplet, sixteenth). Everything your readers need for structured practice.

04

Tap Tempo & Clap Detection

Two ways to set the tempo hands-free: Tap Tempo lets users tap a button to the beat. Clap Detection uses the microphone to pick up claps or taps on the table. Both calculate the BPM automatically after a few beats.

05

Speed Training

Gradually increase the tempo while practicing. Set a start BPM, end BPM, increment, and how many bars to play before speeding up. The metronome raises the tempo automatically — no manual adjustments needed mid-practice.

06

Quiet Mode

Alternates between audible and silent bars. Set how many bars to play and how many to mute. Trains internal timing — can you keep the beat when the metronome goes silent? Essential for developing a solid inner pulse.

07

Data Attributes

Pre-configure the metronome for your content: set the starting BPM, time signature, and subdivision via data attributes on the script tag. Write a 3/4 waltz tutorial? Add data-bpm="90" data-time="3-4" and the metronome opens ready to go.

08

JavaScript API

Control the metronome from your page via postMessage: play, stop, change BPM, switch time signatures. Build interactive tutorials where buttons on your page drive the embedded metronome.

Configuration Options
<script src="https://app.the-ultimate-piano.com/metronome.js" data-bpm="120" data-time="3-4" data-subdivision="eighth"></script> <div id="up-metronome"></div>
data-bpm Starting tempo (20–400). Default: 100 data-time Time signature: 4-4, 3-4, 2-4, 5-4, 6-8, 12-8 data-subdivision quarter, eighth, triplet, sixteenth data-ref Affiliate referral ID (optional)
Who Is This For?
→

Music Blogs & Tutorials

Guitar lessons, drum tutorials, vocal coaching, songwriting guides — any music content where readers benefit from practicing with a metronome right on the page. No separate tab, no app download.

→

Online Music Schools

Embed the metronome directly into lesson pages. Pre-set the BPM and time signature for each exercise. Students practice at the right tempo without leaving your platform.

→

Music Theory Sites

Demonstrate time signatures, subdivisions, and rhythmic concepts with an interactive metronome. Let readers hear the difference between 4/4 and 6/8 — not just read about it.

Earn Commission with Your Embed

Founding Partner
Lock in the highest recurring commission rate
First payment + every renewal. Founding Partners keep their rate permanently.

Create your free partner account, get your referral ID, and add it to the script tag:

<script src="https://app.the-ultimate-piano.com/metronome.js" data-ref="YOUR_ID"></script> <div id="up-metronome"></div>

When visitors click the badge and subscribe, you earn commission automatically. 30-day cookie, PayPal/bank payout. Learn more about the partner program →

Two lines of code. Real drum grooves. On your site in 30 seconds.

Get the Embed Code

Free Metronome Widget — FAQ

Is this really a free metronome widget?

Yes. The widget is completely free to embed. It includes a small “The Ultimate Piano” badge above the metronome that links to our app. No signup, no API key, no usage limits.

Can I embed metronome on any website builder?

Yes. The widget works in WordPress, Squarespace, Wix, Webflow, static HTML, and any platform that supports HTML embeds. Just paste the two-line code into an HTML block.

Can I pre-configure the metronome for specific exercises?

Yes. Add data-bpm="90" data-time="3-4" to the script tag. The metronome opens pre-configured at 90 BPM in 3/4 time.

Can I control the metronome from my page with JavaScript?

Yes. The widget supports a postMessage API. You can send commands like play, stop, setBpm, and setTimeSignature from your host page. This lets you build interactive tutorials where buttons on your page control the embedded metronome.

Does the widget include drum rhythms?

Yes. The embedded metronome includes one drum groove each for 4/4, 3/4, 6/8 and 12/8; the full library across Jazz, Rock, Blues, Funk, Country and more comes with The Ultimate Piano Premium. Users can switch between a standard click and real drum patterns directly in the widget.

Does the widget set cookies or track my visitors?

No. The metronome widget does not set any cookies and does not collect personal data. All audio processing happens locally in the visitor’s browser using the Web Audio API. Besides loading the widget and its sounds from our server, it sends one anonymous visit count to our own self-hosted, cookie-free analytics, which respects Do Not Track.

Do I have to keep the attribution link?

Yes. The embed script automatically adds an attribution badge above the metronome. This link must remain visible and unmodified. It’s how we keep the widget free and maintained for everyone.

Can I earn money by embedding the metronome?

Yes. Join our affiliate program and add data-ref="YOUR_ID" to the script tag. You earn recurring commission on every subscription that originates from your embed.