Metronome

What Is a Metronome?

A metronome is a device that produces a steady pulse at a configurable tempo, measured in beats per minute (BPM). Musicians use metronomes to develop consistent timing, practice difficult passages at slower tempos, and gradually build speed.

BPM (Beats Per Minute)

BPM defines how many beats occur in one minute. A higher BPM means a faster tempo. The interval between beats in milliseconds is calculated as:

Interval (ms) = 60,000 / BPM

For example, at 120 BPM each beat is 500 ms apart.

Time Signatures

A time signature defines the rhythmic structure of music. The top number indicates beats per measure, and the bottom number indicates which note value gets one beat. Common time signatures include:

• 4/4 (Common time): 4 quarter-note beats per measure, used in most popular music
• 3/4 (Waltz time): 3 quarter-note beats per measure, used in waltzes and minuets
• 6/8 (Compound duple): 6 eighth-note beats grouped in two sets of three
• 5/4: 5 quarter-note beats, common in progressive and jazz music
• 7/8: 7 eighth-note beats, used in Balkan and progressive music

Accent Patterns

Accents emphasize certain beats to define the rhythmic feel. Typically the first beat of each measure is accented (the "downbeat"). You can customize accent patterns by clicking the beat indicators to create complex rhythmic patterns for advanced practice.

Common Tempo Markings

• Largo: 40-60 BPM (very slow)
• Adagio: 66-76 BPM (slow)
• Andante: 76-108 BPM (walking pace)
• Moderato: 108-120 BPM (moderate)
• Allegro: 120-156 BPM (fast)
• Vivace: 156-176 BPM (lively)
• Presto: 168-200 BPM (very fast)

Audio Engine

This metronome uses the Web Audio API for precise, low-latency timing. Rather than relying on setInterval (which can drift), beats are scheduled ahead of time on the audio clock, ensuring rock-solid accuracy even when the browser tab is in the background.

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML:

Copy snippet Adjust the height to taste.