{"id":69415,"date":"2026-11-04T09:51:40","date_gmt":"2026-11-04T04:21:40","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/tools\/metronome\/"},"modified":"2026-11-04T16:19:41","modified_gmt":"2026-11-04T10:49:41","slug":"metronome","status":"publish","type":"page","link":"https:\/\/www.quickonlinetips.com\/archives\/tools\/metronome\/","title":{"rendered":"Metronome: Free Online Metronome With Tap Tempo"},"content":{"rendered":"<p>This free <strong>online metronome<\/strong> keeps a steady beat for music practice, from 30 to 260 beats per minute (BPM). Set the tempo with the slider or <strong>tap tempo<\/strong>, choose the time signature and accents, then press Start. It runs in your browser with sample-accurate timing, so the beat stays even on phones and computers.<\/p>\n<div class=\"qt-tool\" id=\"qt-met\">\n<p class=\"qt-label\" style=\"font-size:1.15em;margin:0 0 10px\"><strong>Step 1:<\/strong> Set the tempo and beat<\/p>\n<div class=\"qtx-out\" style=\"margin-top:0;text-align:center\">\n<p class=\"qtx-big-out\" style=\"font-size:44px;margin:0\"><span id=\"qt-met-bpmv\">100<\/span> <span style=\"font-size:18px;color:#4A5568\">BPM<\/span><\/p>\n<p class=\"qt-small\" id=\"qt-met-name\" style=\"margin:0 0 8px\">Andante (walking pace)<\/p>\n<p><input type=\"range\" id=\"qt-met-bpm\" min=\"30\" max=\"260\" step=\"1\" value=\"100\" aria-label=\"Tempo in beats per minute\"><\/p>\n<div class=\"qt-row\" style=\"justify-content:center\"><button type=\"button\" class=\"qt-btn qt-btn-ghost qtx-nomark\" id=\"qt-met-m5\">&minus;5<\/button><button type=\"button\" class=\"qt-btn qt-btn-ghost qtx-nomark\" id=\"qt-met-m1\">&minus;1<\/button><input type=\"number\" id=\"qt-met-bpmn\" min=\"30\" max=\"260\" value=\"100\" style=\"width:96px;text-align:center\" aria-label=\"Type a tempo\"><button type=\"button\" class=\"qt-btn qt-btn-ghost qtx-nomark\" id=\"qt-met-p1\">+1<\/button><button type=\"button\" class=\"qt-btn qt-btn-ghost qtx-nomark\" id=\"qt-met-p5\">+5<\/button><\/div>\n<div style=\"margin:14px 0 0\"><button type=\"button\" class=\"qt-btn qt-btn-big qtx-nomark\" id=\"qt-met-tap\" style=\"width:100%;min-height:76px;flex-direction:column;gap:2px;font-size:24px;background:#7C3AED;border-color:#7C3AED;box-shadow:0 4px 0 #5B21B6;color:#fff;touch-action:manipulation;-webkit-user-select:none;user-select:none\">&#x1F446; Tap tempo<span style=\"font-weight:400;font-size:15px;opacity:.92\">Tap here 4 or more times to the beat (or press T)<\/span><\/button><\/p>\n<p class=\"qt-status\" id=\"qt-met-tapst\" aria-live=\"polite\" style=\"margin:6px 0 0;font-weight:700;font-size:16px;text-align:center\">\n<\/div>\n<\/div>\n<div class=\"qt-grid\">\n<div class=\"qt-field\"><label for=\"qt-met-beats\">Beats per bar<\/label><select id=\"qt-met-beats\"><option value=\"1\">1<\/option><option value=\"2\">2 (2\/4)<\/option><option value=\"3\">3 (3\/4)<\/option><option value=\"4\" selected>4 (4\/4)<\/option><option value=\"5\">5 (5\/4)<\/option><option value=\"6\">6 (6\/8)<\/option><option value=\"7\">7 (7\/8)<\/option><option value=\"8\">8<\/option><option value=\"9\">9 (9\/8)<\/option><option value=\"12\">12 (12\/8)<\/option><\/select><\/div>\n<div class=\"qt-field\"><label for=\"qt-met-sub\">Clicks per beat<\/label><select id=\"qt-met-sub\"><option value=\"1\">1 (quarter notes)<\/option><option value=\"2\">2 (eighth notes)<\/option><option value=\"3\">3 (triplets)<\/option><option value=\"4\">4 (sixteenth notes)<\/option><\/select><\/div>\n<div class=\"qt-field\"><label for=\"qt-met-snd\">Sound<\/label><select id=\"qt-met-snd\"><option value=\"click\">Click<\/option><option value=\"wood\">Woodblock<\/option><option value=\"beep\">Beep<\/option><\/select><\/div>\n<div class=\"qt-field\"><label for=\"qt-met-vol\">Volume<\/label><input type=\"range\" id=\"qt-met-vol\" min=\"0\" max=\"100\" value=\"80\"><\/div>\n<\/div>\n<div class=\"qt-grid\"><label class=\"qt-check\"><input type=\"checkbox\" id=\"qt-met-acc\" checked> Accent the first beat of each bar<\/label><label class=\"qt-check\"><input type=\"checkbox\" id=\"qt-met-flash\" checked> Flash on each beat<\/label><\/div>\n<p class=\"qt-label\" style=\"font-size:1.15em;margin:18px 0 10px\"><strong>Step 2:<\/strong> Press Start<\/p>\n<p> <button type=\"button\" class=\"qt-btn qt-btn-big\" id=\"qt-met-go\" style=\"width:100%\">Start metronome<\/button> <\/p>\n<div id=\"qt-met-vis\" hidden style=\"margin-top:14px\">\n<div id=\"qt-met-dots\" style=\"display:flex;justify-content:center;gap:14px;flex-wrap:wrap\"><\/div>\n<p class=\"qt-small\" id=\"qt-met-count\">\n<\/div>\n<p class=\"qt-status\" id=\"qt-met-status\" aria-live=\"polite\">\n<p class=\"qt-note\"><strong>Private by design:<\/strong> the metronome makes its sound in your own browser. Nothing is recorded, sent to QuickOnlineTips or stored. If you hear nothing, check that your phone is not on silent.<\/p>\n<\/p><\/div>\n<p><script>(function () { function qtReady(fn) { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', fn); } else { fn(); } } function qtCopy(text, statusEl, okMsg) { function done(ok) { if (statusEl) { statusEl.textContent = ok ? (okMsg || 'Copied to clipboard.') : 'Press Ctrl+C (or Cmd+C) to copy.'; } } function fallback() { var ta = document.createElement('textarea'); ta.value = text; ta.setAttribute('readonly', ''); ta.style.position = 'fixed'; ta.style.top = '-1000px'; document.body.appendChild(ta); ta.select(); var ok = false; try { ok = document.execCommand('copy'); } catch (e) { ok = false; } document.body.removeChild(ta); done(ok); } if (navigator.clipboard) { if (window.isSecureContext) { navigator.clipboard.writeText(text).then(function () { done(true); }, fallback); return; } } fallback(); } function qtSave(blob, name) { var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = name; document.body.appendChild(a); a.click(); setTimeout(function () { URL.revokeObjectURL(a.href); a.remove(); }, 1500); } qtReady(function () { var root = document.getElementById('qt-met'); if (!root) { return; } function $(id) { return document.getElementById('qt-met-' + id); } var bpmR = $('bpm'), bpmN = $('bpmn'), bpmV = $('bpmv'), nameEl = $('name'), go = $('go'), vis = $('vis'), dotsEl = $('dots'), countEl = $('count'), st = $('status'); var beatsEl = $('beats'), subEl = $('sub'), sndEl = $('snd'), volEl = $('vol'), accEl = $('acc'), flashEl = $('flash'); var bpm = 100, ac = null, master = null, on = false, timer = 0, nextT = 0, step = 0, queue = [], raf = 0, bars = 0, taps = []; var MARKS = [[200, 'Prestissimo (as fast as possible)'], [168, 'Presto (very fast)'], [156, 'Vivace (lively)'], [120, 'Allegro (fast)'], [108, 'Moderato (moderate)'], [76, 'Andante (walking pace)'], [66, 'Adagio (slow)'], [40, 'Largo (very slow)'], [0, 'Grave (extremely slow)']]; function mark(b) { for (var i = 0; MARKS.length > i; i++) { if (b >= MARKS[i][0]) { return MARKS[i][1]; } } return ''; } function setBpm(v) { v = Math.round(Number(v)); if (isNaN(v)) { return; } if (30 > v) { v = 30; } if (v > 260) { v = 260; } bpm = v; bpmR.value = v; bpmN.value = v; bpmV.textContent = v; nameEl.textContent = mark(v); } bpmR.addEventListener('input', function () { setBpm(bpmR.value); }); bpmN.addEventListener('change', function () { setBpm(bpmN.value); }); [['m5', -5], ['m1', -1], ['p1', 1], ['p5', 5]].forEach(function (x) { $(x[0]).addEventListener('click', function () { setBpm(bpm + x[1]); }); }); $('tap').addEventListener('click', function () { var now = performance.now(); var tb = $('tap'); tb.style.filter = 'brightness(1.3)'; tb.style.transform = 'scale(0.98)'; setTimeout(function () { tb.style.filter = ''; tb.style.transform = ''; }, 110); if (taps.length) { if (now - taps[taps.length - 1] > 2500) { taps = []; } } taps.push(now); if (taps.length > 8) { taps.shift(); } if (2 > taps.length) { $('tapst').textContent = 'Keep tapping...'; return; } var sum = 0; for (var i = 1; taps.length > i; i++) { sum += taps[i] - taps[i - 1]; } setBpm(60000 \/ (sum \/ (taps.length - 1))); $('tapst').textContent = taps.length + ' taps: ' + bpm + ' BPM'; }); function buildDots() { dotsEl.textContent = ''; var n = parseInt(beatsEl.value, 10); for (var i = 0; n > i; i++) { var d = document.createElement('span'); d.style.cssText = 'width:54px;height:54px;border-radius:50%;background:#CBD5E0;border:3px solid #90B4DA;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:#2D3748;transition:background .05s,transform .05s'; d.textContent = String(i + 1); dotsEl.appendChild(d); } } function click(t, kind) { var o = ac.createOscillator(), g = ac.createGain(), s = sndEl.value, f = 1000, len = 0.03, type = 'square', vol = 0.6; if (s === 'click') { f = kind === 2 ? 1800 : (kind === 1 ? 1200 : 800); len = 0.025; type = 'square'; vol = kind === 0 ? 0.25 : 0.5; } else if (s === 'wood') { f = kind === 2 ? 1100 : (kind === 1 ? 800 : 600); len = 0.06; type = 'triangle'; vol = kind === 0 ? 0.4 : 0.8; } else { f = kind === 2 ? 1320 : (kind === 1 ? 880 : 660); len = 0.08; type = 'sine'; vol = kind === 0 ? 0.3 : 0.6; } o.type = type; o.frequency.value = f; g.gain.setValueAtTime(0.0001, t); g.gain.exponentialRampToValueAtTime(vol, t + 0.002); g.gain.exponentialRampToValueAtTime(0.0001, t + len); o.connect(g); g.connect(master); o.start(t); o.stop(t + len + 0.02); } function schedule() { var sub = parseInt(subEl.value, 10), beats = parseInt(beatsEl.value, 10), per = sub * beats; while (ac.currentTime + 0.12 > nextT) { var inBar = step % per, beat = Math.floor(inBar \/ sub), isBeat = inBar % sub === 0; var kind = isBeat ? ((beat === 0 ? accEl.checked : false) ? 2 : 1) : 0; click(nextT, kind); if (isBeat) { queue.push([nextT, beat, step === 0 ? 0 : (inBar === 0 ? 1 : 0)]); } nextT += 60 \/ bpm \/ sub; step++; if (step % per === 0) { step = 0; } } } function draw() { var now = ac.currentTime; while (queue.length) { if (queue[0][0] > now) { break; } var q = queue.shift(); var ds = dotsEl.children; if (q[1] === 0) { bars++; } countEl.textContent = 'Bar ' + bars + ', beat ' + (q[1] + 1); for (var i = 0; ds.length > i; i++) { var lit = i === q[1]; ds[i].style.background = lit ? (i === 0 ? (accEl.checked ? '#DD6B20' : '#2B6CB0') : '#2B6CB0') : '#CBD5E0'; ds[i].style.color = lit ? '#fff' : '#2D3748'; ds[i].style.transform = lit ? 'scale(1.12)' : ''; } if (flashEl.checked) { root.style.boxShadow = q[1] === 0 ? '0 0 0 4px #DD6B20' : '0 0 0 4px #90B4DA'; setTimeout(function () { root.style.boxShadow = ''; }, 90); } } raf = requestAnimationFrame(draw); } function startIt() { var C = window.AudioContext || window.webkitAudioContext; if (!C) { st.textContent = 'Your browser cannot play sound from web pages.'; st.classList.add('qt-error'); return; } if (!ac) { ac = new C(); master = ac.createGain(); master.connect(ac.destination); } if (ac.state === 'suspended') { ac.resume(); } master.gain.value = Number(volEl.value) \/ 100; buildDots(); vis.hidden = false; bars = 0; queue = []; step = 0; nextT = ac.currentTime + 0.08; on = true; schedule(); timer = setInterval(schedule, 25); raf = requestAnimationFrame(draw); go.textContent = 'Stop metronome'; st.textContent = 'Playing at ' + bpm + ' BPM. Change the tempo any time.'; st.classList.remove('qt-error'); } function stopIt() { on = false; clearInterval(timer); cancelAnimationFrame(raf); queue = []; root.style.boxShadow = ''; go.textContent = 'Start metronome'; st.textContent = 'Stopped.'; Array.prototype.forEach.call(dotsEl.children, function (d) { d.style.background = '#CBD5E0'; d.style.color = '#2D3748'; d.style.transform = ''; }); } go.addEventListener('click', function () { if (on) { stopIt(); } else { startIt(); } }); volEl.addEventListener('input', function () { if (master) { master.gain.value = Number(volEl.value) \/ 100; } }); beatsEl.addEventListener('change', function () { if (on) { step = 0; buildDots(); } }); subEl.addEventListener('change', function () { if (on) { step = 0; } }); document.addEventListener('keydown', function (e) { if (e.key === ' ') { if (document.activeElement === document.body) { e.preventDefault(); go.click(); } } else if (e.key === 't' || e.key === 'T') { var tg = document.activeElement ? document.activeElement.tagName : ''; if (tg !== 'INPUT') { if (tg !== 'SELECT') { if (tg !== 'TEXTAREA') { $('tap').click(); } } } } }); var m = location.search.match(\/bpm=(\\d+)\/); if (m) { setBpm(m[1]); } }); })();<\/script><\/p>\n<div class=\"qt-next\">\n<p class=\"qt-next-h\">Try another free tool<\/p>\n<div class=\"qt-next-g\"><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/online-timer\/\">Online Timer<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/online-stopwatch\/\">Stopwatch and Timer<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/mic-test\/\">Mic Test<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/tally-counter\/\">Tally Counter<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/pomodoro-timer\/\">Pomodoro Timer<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/random-number-generator\/\">Random Number Generator<\/a><\/div>\n<\/div>\n<p><strong>Quick answer:<\/strong> Drag the slider (or press <strong>Tap tempo<\/strong> in time with your music) to set the BPM, pick beats per bar, then press <strong>Start metronome<\/strong>. The first beat of each bar is accented so you can count bars.<\/p>\n<h2>How to use the metronome<\/h2>\n<ol>\n<li>Set the tempo: drag the slider, type a number, use the &minus; and + buttons, or press <strong>Tap tempo<\/strong> four or more times in time with a song.<\/li>\n<li>Pick the beats per bar (for example 4 for 4\/4, 3 for a waltz) and how many clicks you want per beat.<\/li>\n<li>Choose a sound and volume, then press <strong>Start metronome<\/strong>. Change the tempo while it plays; the new speed starts on the next click.<\/li>\n<\/ol>\n<h2>Tempo markings and BPM<\/h2>\n<p>Classical music uses Italian words for speed. The ranges below are the usual guide; composers and teachers vary a little.<\/p>\n<table class=\"qt-ref\">\n<thead>\n<tr>\n<th>Marking<\/th>\n<th>Meaning<\/th>\n<th>About BPM<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Largo<\/td>\n<td>Very slow, broad<\/td>\n<td>40 to 60<\/td>\n<\/tr>\n<tr>\n<td>Adagio<\/td>\n<td>Slow, at ease<\/td>\n<td>66 to 76<\/td>\n<\/tr>\n<tr>\n<td>Andante<\/td>\n<td>Walking pace<\/td>\n<td>76 to 108<\/td>\n<\/tr>\n<tr>\n<td>Moderato<\/td>\n<td>Moderate<\/td>\n<td>108 to 120<\/td>\n<\/tr>\n<tr>\n<td>Allegro<\/td>\n<td>Fast, bright<\/td>\n<td>120 to 156<\/td>\n<\/tr>\n<tr>\n<td>Vivace<\/td>\n<td>Lively<\/td>\n<td>156 to 176<\/td>\n<\/tr>\n<tr>\n<td>Presto<\/td>\n<td>Very fast<\/td>\n<td>168 to 200<\/td>\n<\/tr>\n<tr>\n<td>Prestissimo<\/td>\n<td>As fast as possible<\/td>\n<td>above 200<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Practice tips<\/h2>\n<ul>\n<li>Learn a hard passage slowly, about 20 BPM below the target, until it is clean. Then raise the tempo by 4 or 5 BPM at a time.<\/li>\n<li>Use 2 clicks per beat (eighth notes) to keep fast runs even, or 3 for swing and triplet feel.<\/li>\n<li>Most pop songs sit between 90 and 130 BPM. Use Tap tempo to find a song&#8217;s speed.<\/li>\n<\/ul>\n<h2>FAQ<\/h2>\n<h3>Is this metronome accurate?<\/h3>\n<p>Yes. Clicks are scheduled ahead of time by your browser&#8217;s audio engine, not by a page timer, so the gaps stay even. A busy older phone may delay the flashing lights slightly, but not the sound.<\/p>\n<h3>Does it work in the background?<\/h3>\n<p>Usually yes on computers. Some phones stop web audio when the screen locks, so keep the screen on while you practise.<\/p>\n<h3>What is the best BPM for running?<\/h3>\n<p>Many runners aim for about 160 to 180 steps a minute. Set the metronome to your target cadence and step on each click.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This free online metronome keeps a steady beat for music practice, from 30 to 260 beats per minute (BPM). Set the tempo with the slider or tap tempo, choose the time signature and accents, then press Start. It runs in your browser with sample-accurate timing, so the beat stays even on phones and computers. Step&#8230;<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":65595,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-69415","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/69415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=69415"}],"version-history":[{"count":3,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/69415\/revisions"}],"predecessor-version":[{"id":69447,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/69415\/revisions\/69447"}],"up":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/65595"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=69415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}