Online Metronome Pro
Tap Tempo · Time Signatures · Subdivisions · Accent · Sound · Speed Trainer
Explanation & FAQ
This online metronome is built so that you can use it without plugins directly in WordPress (Elementor Free). It loads no external files, uses no fonts/CDNs and works entirely in the browser. The sound is created via the Web Audio API: A short oscillator impulse is shaped with a gain envelope (fast on, fast off). This gives you a clear click without crackling. for orientation in the measure, the first beat can be accented (higher pitch and slightly more volume).
Why this is important: Normal JavaScript timers (setInterval) can fluctuate depending on device, CPU load and background tab. This metronome therefore plans the next clicks a good bit "into the future" in the audio timeline (scheduling lookahead). This makes the beats noticeably more stable – especially at 120–220 BPM or with subdivisions like sixteenths. In Safari/iOS, the following also applies: Audio may only start after a user action. That's why there is a large Start button; upon start, the AudioContext is activated via resume() and the planning starts.
- Tap Tempo: Tap on "Tap" or press the T key (or Spacebar to the beat). The tool measures the intervals of your last taps, discards outliers and calculates an average. This gives you a realistic tempo quickly – great if you want to "find" a song tempo.
- Time Signatures: Choose e.g. 4/4, 3/4, 5/4 or 6/8. The beat dots show you which count point you are on. Especially with odd time signatures, the visual orientation helps enormously.
- Subdivisions: Quarter, Eighth, Triplets or Sixteenths. Practical for timing training (e.g. 70 BPM and sixteenths for clean runs) or for 6/8 grooves with eighth-note subdivision.
- Sound & Volume: You can switch between "Click" (clear) and "Wood" (warmer) and adjust the volume finely.
- Visual Feedback: The pulse ring and the pendulum-like movement give you a feeling for the "flow". If you have to practice quietly, turn the volume down and use the visuals as orientation.
Practice ideas: Start at a tempo where you can play error-free. Then increase in 2 or 5 BPM steps (Arrow up/down, with Shift ±5). For "Pocket" exercises you can leave the subdivision on quarter notes and consciously "lock in" between the clicks. For precision, you can switch to triplets and hold the same figure over several bars. Advanced variation: Leave the accent on 1 on, but consciously play offbeats (e.g. only on "2 and 4") – this trains timing and internal clock.
Operation: Set BPM via slider or input field, select time signature and subdivision, optionally activate "Accent on 1" and start. Stop halts cleanly. The last used settings are saved in the browser (localStorage), so you can continue practicing directly on your next visit. Shortcuts: Spacebar = Start/Stop, T = Tap, ↑/↓ = BPM ±1, Shift+↑/↓ = BPM ±5, Esc = Stop.
FAQ: iPhone/Safari – why do I only hear something after tapping?
iOS blocks audio until you actively interact. Press Start, after that it runs reliably.
FAQ: Does the metronome need microphone access?
No. It generates the sound locally in the browser. HTTPS is still recommended because mobile browsers handle audio functions more reliably with it.
FAQ: How accurate is the metronome?
The clicks are pre-scheduled in the audio timeline; this is in practice significantly more stable than raw timer loops, which depend on CPU load.
FAQ: Why does it sometimes stop in the background?
Mobile browsers throttle tabs when you switch away. This is normal; for maximum accuracy leave the page in the foreground.
FAQ: Can I customize the sound or design?
Yes. In the script you will find presets (Click/Wood) and in the <style> block CSS variables for colors, shadows, curves and sizes – so you can visually rebuild it without touching the logic.
Embed this Calculator on Your Website
You can integrate this calculator for free into your own website. Get the embed code on our overview page.