CookbookTeaching and coursesNo. 21
A music theory workbookmethod pages written for your own students
See it in know.sh
Piano theory workbookLevel 4 — Tempo, rhythm and compound time
3of 8
Tempo words and a steady beat
Observation, key section, 1 element, 340 words
The idea. The Italian word at the top of a piece says roughly how fast it goes: Adagio, at ease; Andante, at a walking pace; Allegro, quick and lively. A metronome mark says exactly: M.M. ♩ = 92 means 92 crotchet beats a minute, M.M. for Maelzel’s metronome, patented in 1815. The words are older than the numbers and name a range, not a speed, and books disagree about the edges by a few beats.
At the keyboard. Set the metronome below to 60 and play the C major scale RH, one note to each click. Then try 72, 84 and 96. In 3/4, count “1 2 3” with the heavy square on 1 and play a C major chord LH on each 1. In 6/8 there are two beats in a bar, each clicked as three quavers: count “one two three four five six”.
Metronome
Set the speed from 40 to 208 beats a minute with the slider, the − and + buttons or by tapping, choose 2/4, 3/4, 4/4 or 6/8, and press Start: the first beat of each bar clicks higher and its square is drawn heavier. In 6/8 the number counts the dotted-crotchet beat, two to a bar, and each beat clicks as three quavers. The Italian word is a rough guide: books disagree by a few beats, and the words between (Larghetto, Vivace) are left out. Where the device gives no sound, the squares still keep the beat.
<div class="metro">
<div class="speed">
<p class="bpm"><output id="bpmOut" for="tempo">92</output> <span id="unit">crotchet beats a minute</span></p>
<p class="mark" aria-live="polite"><i id="markName">Andante</i> <span id="markSay">at a walking pace, about 76 to 107</span></p>
</div>
<div class="beats" id="beats" aria-hidden="true"></div>
<div class="tempo">
<button type="button" id="slower" aria-label="One beat a minute slower">−</button>
<label class="slide"><span class="vh">Tempo in beats a minute</span><input id="tempo" type="range" min="40" max="208" step="1" value="92"></label>
<button type="button" id="faster" aria-label="One beat a minute faster">+</button>
</div>
<div class="row">
<div class="meters" role="group" aria-label="Time signature">
<button type="button" data-meter="2/4" aria-pressed="false">2/4</button>
<button type="button" data-meter="3/4" aria-pressed="false">3/4</button>
<button type="button" data-meter="4/4" aria-pressed="true">4/4</button>
<button type="button" data-meter="6/8" aria-pressed="false">6/8</button>
</div>
<button type="button" id="sound" aria-pressed="true">Sound on</button>
</div>
<div class="row go">
<button type="button" id="start" class="primary">Start</button>
<button type="button" id="tap">Tap tempo</button>
</div>
<p class="say" id="say" aria-live="polite">Press Start, or tap the beat four times to set the speed.</p>
</div>.metro { font: 400 14px/1.4 var(--sans); color: var(--ink); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.speed { border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.bpm { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.bpm output { font: 400 56px/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.bpm span { font: 400 13px/1.3 var(--sans); color: var(--ink-3); }
.mark { margin: 6px 0 0; min-height: 1.5em; }
.mark i { font: italic 400 22px/1.2 var(--serif); margin-right: 6px; }
.mark span { color: var(--ink-2); }
.beats { display: flex; gap: 8px; margin: 16px 0 14px; min-height: 44px; }
.beats .grp { display: flex; gap: 4px; }
.beats .grp + .grp { margin-left: 10px; }
.cell { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--ink-3); font: 500 15px/1 var(--sans); color: var(--ink-2); background: var(--paper); }
.cell.strong { border: 3px solid var(--ink); color: var(--ink); }
.cell.mid { border: 2px solid var(--ink); }
.cell.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tempo { display: flex; align-items: center; gap: 10px; }
.slide { flex: 1; display: block; }
.slide input { width: 100%; accent-color: var(--ink); margin: 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 12px; }
.meters { display: flex; }
.meters button + button { border-left: 0; }
button { font: 500 14px/1 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 10px 12px; min-height: 42px; min-width: 42px; cursor: pointer; touch-action: manipulation; }
#slower, #faster { font-size: 20px; padding: 6px 12px; }
button[aria-pressed='true'], button.primary { background: var(--ink); color: var(--paper); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.go button { flex: 1; }
.say { margin: 12px 0 0; min-height: 1.5em; padding-top: 8px; border-top: 1px solid var(--rule); font: italic 400 16px/1.45 var(--serif); color: var(--ink-2); }
@media (max-width: 400px) { .cell { width: 34px; height: 34px; } .beats .grp { gap: 3px; } .beats .grp + .grp { margin-left: 8px; } .bpm output { font-size: 48px; } }(function () {
var root = document.querySelector('.metro');
function $(id) { return root.querySelector('#' + id); }
var MIN = 40, MAX = 208;
// Approximate ranges; sources differ by a few beats either way.
var MARKS = [
{ name: 'Largo', to: 65, say: 'broadly, very slow, about 40 to 65' },
{ name: 'Adagio', to: 75, say: 'slow, at ease, about 66 to 75' },
{ name: 'Andante', to: 107, say: 'at a walking pace, about 76 to 107' },
{ name: 'Moderato', to: 119, say: 'at a moderate speed, about 108 to 119' },
{ name: 'Allegro', to: 167, say: 'quick and lively, about 120 to 167' },
{ name: 'Presto', to: 208, say: 'very fast, about 168 and up' }
];
// beats: counted beats a bar; sub: clicks a beat (6/8: three quavers to each dotted-crotchet beat).
var METERS = { '2/4': { beats: 2, sub: 1 }, '3/4': { beats: 3, sub: 1 }, '4/4': { beats: 4, sub: 1 }, '6/8': { beats: 2, sub: 3 } };
var bpm = 92, meterName = '4/4', meter = METERS[meterName], sound = true;
var ac = null, running = false, nextTime = 0, clickIdx = 0, queue = [], timer = 0, raf = 0, lit = -1, litAt = 0, taps = [];
var cells = [];
function now() { return performance.now() / 1000; }
function markFor(b) { for (var i = 0; i < MARKS.length; i++) if (b <= MARKS[i].to) return MARKS[i]; return MARKS[MARKS.length - 1]; }
function level(i) { return i === 0 ? 2 : (i % meter.sub === 0 ? 1 : 0); }
function say(t) { $('say').textContent = t; }
function buildCells() {
var box = $('beats'); box.innerHTML = ''; cells = [];
for (var b = 0; b < meter.beats; b++) {
var g = document.createElement('div'); g.className = 'grp';
for (var s = 0; s < meter.sub; s++) {
var i = b * meter.sub + s, c = document.createElement('div');
c.className = 'cell' + (level(i) === 2 ? ' strong' : level(i) === 1 ? ' mid' : '');
c.textContent = String(i + 1);
g.appendChild(c); cells.push(c);
}
box.appendChild(g);
}
lit = -1;
}
function showTempo() {
$('bpmOut').textContent = String(bpm);
$('tempo').value = String(bpm);
$('tempo').setAttribute('aria-valuetext', bpm + ' beats a minute, ' + markFor(bpm).name);
var m = markFor(bpm);
$('markName').textContent = m.name;
$('markSay').textContent = m.say;
$('unit').textContent = meter.sub === 3 ? 'dotted-crotchet beats a minute, clicked in quavers' : 'crotchet beats a minute';
}
function setTempo(b) { bpm = Math.max(MIN, Math.min(MAX, Math.round(b))); showTempo(); }
function beep(at, lv) {
if (!sound || !ac || ac.state !== 'running') return;
var when = ac.currentTime + (at - now());
if (when < ac.currentTime) return;
try {
var o = ac.createOscillator(), g = ac.createGain();
o.type = 'triangle';
o.frequency.value = lv === 2 ? 1760 : lv === 1 ? 1320 : 880;
g.gain.setValueAtTime(0.0001, when);
g.gain.exponentialRampToValueAtTime(lv === 2 ? 0.6 : 0.35, when + 0.003);
g.gain.exponentialRampToValueAtTime(0.0001, when + 0.06);
o.connect(g); g.connect(ac.destination);
o.start(when); o.stop(when + 0.07);
} catch (e) { /* no sound: the squares still keep the beat */ }
}
function schedule() {
var t = now();
while (nextTime < t + 0.12) {
var lv = level(clickIdx);
queue.push({ t: nextTime, i: clickIdx });
beep(nextTime, lv);
nextTime += 60 / bpm / meter.sub;
clickIdx = (clickIdx + 1) % (meter.beats * meter.sub);
}
timer = setTimeout(schedule, 25);
}
function draw() {
var t = now();
while (queue.length && queue[0].t <= t) {
var q = queue.shift();
if (lit >= 0 && cells[lit]) cells[lit].classList.remove('on');
lit = q.i; litAt = q.t;
if (cells[lit]) cells[lit].classList.add('on');
}
var flash = Math.min(0.12, 30 / bpm / meter.sub);
if (lit >= 0 && t - litAt > flash && cells[lit]) cells[lit].classList.remove('on');
if (running) raf = requestAnimationFrame(draw);
}
function startAudio() {
if (!ac) {
try { var AC = window.AudioContext || window.webkitAudioContext; if (AC) ac = new AC(); } catch (e) { ac = null; }
}
if (ac && ac.state !== 'running' && ac.resume) {
try { var p = ac.resume(); if (p && p.catch) p.catch(function () {}); } catch (e) {}
}
}
function start() {
startAudio();
running = true; clickIdx = 0; queue = []; nextTime = now() + 0.08;
$('start').textContent = 'Stop';
schedule();
raf = requestAnimationFrame(draw);
say('Counting ' + meterName + ' at ' + bpm + ', ' + markFor(bpm).name + '.');
setTimeout(function () {
if (!running || !sound) return;
if (!ac || ac.state !== 'running') say('No sound on this device, so follow the squares: the heavy one is the first beat of the bar.');
}, 600);
}
function stop() {
running = false; clearTimeout(timer); cancelAnimationFrame(raf); queue = [];
if (lit >= 0 && cells[lit]) cells[lit].classList.remove('on');
lit = -1;
$('start').textContent = 'Start';
say('Stopped at ' + bpm + ', ' + markFor(bpm).name + '.');
}
$('start').addEventListener('click', function () { if (running) stop(); else start(); });
$('slower').addEventListener('click', function () { setTempo(bpm - 1); });
$('faster').addEventListener('click', function () { setTempo(bpm + 1); });
$('tempo').addEventListener('input', function (e) { setTempo(Number(e.target.value)); });
$('sound').addEventListener('click', function () {
sound = !sound;
this.setAttribute('aria-pressed', String(sound));
this.textContent = sound ? 'Sound on' : 'Sound off';
if (sound) startAudio();
});
root.querySelectorAll('[data-meter]').forEach(function (b) {
b.addEventListener('click', function () {
meterName = b.getAttribute('data-meter'); meter = METERS[meterName];
root.querySelectorAll('[data-meter]').forEach(function (x) { x.setAttribute('aria-pressed', String(x === b)); });
buildCells(); showTempo();
if (running) { clickIdx = 0; queue = []; }
say(meterName === '6/8' ? '6/8: two dotted-crotchet beats a bar, each clicked as three quavers.' : meterName + ': ' + meter.beats + ' crotchet beats a bar.');
});
});
$('tap').addEventListener('click', function () {
var t = now();
if (taps.length && t - taps[taps.length - 1] > 2) taps = [];
taps.push(t);
if (taps.length > 5) taps.shift();
if (taps.length < 2) { say('Keep tapping the beat.'); return; }
var gap = (taps[taps.length - 1] - taps[0]) / (taps.length - 1);
var b = 60 / gap;
if (b < MIN || b > MAX) { say('That is ' + Math.round(b) + ' a minute, outside 40 to 208. Tap again.'); taps = [t]; return; }
setTempo(b);
say('Tapped ' + bpm + ', ' + markFor(bpm).name + '.');
});
document.addEventListener('visibilitychange', function () { if (document.hidden && running) stop(); });
buildCells(); showTempo();
})();```element widget
{
"title": "Metronome",
"caption": "Set the speed from 40 to 208 beats a minute with the slider, the − and + buttons or by tapping, choose 2/4, 3/4, 4/4 or 6/8, and press Start: the first beat of each bar clicks higher and its square is drawn heavier. In 6/8 the number counts the dotted-crotchet beat, two to a bar, and each beat clicks as three quavers. The Italian word is a rough guide: books disagree by a few beats, and the words between (Larghetto, Vivace) are left out. Where the device gives no sound, the squares still keep the beat.",
"height": 420,
"html": "<div class=\"metro\">\n <div class=\"speed\">\n <p class=\"bpm\"><output id=\"bpmOut\" for=\"tempo\">92</output> <span id=\"unit\">crotchet beats a minute</span></p>\n <p class=\"mark\" aria-live=\"polite\"><i id=\"markName\">Andante</i> <span id=\"markSay\">at a walking pace, about 76 to 107</span></p>\n </div>\n <div class=\"beats\" id=\"beats\" aria-hidden=\"true\"></div>\n <div class=\"tempo\">\n <button type=\"button\" id=\"slower\" aria-label=\"One beat a minute slower\">−</button>\n <label class=\"slide\"><span class=\"vh\">Tempo in beats a minute</span><input id=\"tempo\" type=\"range\" min=\"40\" max=\"208\" step=\"1\" value=\"92\"></label>\n <button type=\"button\" id=\"faster\" aria-label=\"One beat a minute faster\">+</button>\n </div>\n <div class=\"row\">\n <div class=\"meters\" role=\"group\" aria-label=\"Time signature\">\n <button type=\"button\" data-meter=\"2/4\" aria-pressed=\"false\">2/4</button>\n <button type=\"button\" data-meter=\"3/4\" aria-pressed=\"false\">3/4</button>\n <button type=\"button\" data-meter=\"4/4\" aria-pressed=\"true\">4/4</button>\n <button type=\"button\" data-meter=\"6/8\" aria-pressed=\"false\">6/8</button>\n </div>\n <button type=\"button\" id=\"sound\" aria-pressed=\"true\">Sound on</button>\n </div>\n <div class=\"row go\">\n <button type=\"button\" id=\"start\" class=\"primary\">Start</button>\n <button type=\"button\" id=\"tap\">Tap tempo</button>\n </div>\n <p class=\"say\" id=\"say\" aria-live=\"polite\">Press Start, or tap the beat four times to set the speed.</p>\n</div>",
"css": ".metro { font: 400 14px/1.4 var(--sans); color: var(--ink); }\n.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.speed { border-bottom: 1px solid var(--ink); padding-bottom: 8px; }\n.bpm { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }\n.bpm output { font: 400 56px/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; min-width: 2.2ch; }\n.bpm span { font: 400 13px/1.3 var(--sans); color: var(--ink-3); }\n.mark { margin: 6px 0 0; min-height: 1.5em; }\n.mark i { font: italic 400 22px/1.2 var(--serif); margin-right: 6px; }\n.mark span { color: var(--ink-2); }\n.beats { display: flex; gap: 8px; margin: 16px 0 14px; min-height: 44px; }\n.beats .grp { display: flex; gap: 4px; }\n.beats .grp + .grp { margin-left: 10px; }\n.cell { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--ink-3); font: 500 15px/1 var(--sans); color: var(--ink-2); background: var(--paper); }\n.cell.strong { border: 3px solid var(--ink); color: var(--ink); }\n.cell.mid { border: 2px solid var(--ink); }\n.cell.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }\n.tempo { display: flex; align-items: center; gap: 10px; }\n.slide { flex: 1; display: block; }\n.slide input { width: 100%; accent-color: var(--ink); margin: 0; }\n.row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 12px; }\n.meters { display: flex; }\n.meters button + button { border-left: 0; }\nbutton { font: 500 14px/1 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 10px 12px; min-height: 42px; min-width: 42px; cursor: pointer; touch-action: manipulation; }\n#slower, #faster { font-size: 20px; padding: 6px 12px; }\nbutton[aria-pressed='true'], button.primary { background: var(--ink); color: var(--paper); }\nbutton:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }\n.go button { flex: 1; }\n.say { margin: 12px 0 0; min-height: 1.5em; padding-top: 8px; border-top: 1px solid var(--rule); font: italic 400 16px/1.45 var(--serif); color: var(--ink-2); }\n@media (max-width: 400px) { .cell { width: 34px; height: 34px; } .beats .grp { gap: 3px; } .beats .grp + .grp { margin-left: 8px; } .bpm output { font-size: 48px; } }",
"js": "(function () {\n var root = document.querySelector('.metro');\n function $(id) { return root.querySelector('#' + id); }\n var MIN = 40, MAX = 208;\n // Approximate ranges; sources differ by a few beats either way.\n var MARKS = [\n { name: 'Largo', to: 65, say: 'broadly, very slow, about 40 to 65' },\n { name: 'Adagio', to: 75, say: 'slow, at ease, about 66 to 75' },\n { name: 'Andante', to: 107, say: 'at a walking pace, about 76 to 107' },\n { name: 'Moderato', to: 119, say: 'at a moderate speed, about 108 to 119' },\n { name: 'Allegro', to: 167, say: 'quick and lively, about 120 to 167' },\n { name: 'Presto', to: 208, say: 'very fast, about 168 and up' }\n ];\n // beats: counted beats a bar; sub: clicks a beat (6/8: three quavers to each dotted-crotchet beat).\n var METERS = { '2/4': { beats: 2, sub: 1 }, '3/4': { beats: 3, sub: 1 }, '4/4': { beats: 4, sub: 1 }, '6/8': { beats: 2, sub: 3 } };\n var bpm = 92, meterName = '4/4', meter = METERS[meterName], sound = true;\n var ac = null, running = false, nextTime = 0, clickIdx = 0, queue = [], timer = 0, raf = 0, lit = -1, litAt = 0, taps = [];\n var cells = [];\n\n function now() { return performance.now() / 1000; }\n function markFor(b) { for (var i = 0; i < MARKS.length; i++) if (b <= MARKS[i].to) return MARKS[i]; return MARKS[MARKS.length - 1]; }\n function level(i) { return i === 0 ? 2 : (i % meter.sub === 0 ? 1 : 0); }\n function say(t) { $('say').textContent = t; }\n\n function buildCells() {\n var box = $('beats'); box.innerHTML = ''; cells = [];\n for (var b = 0; b < meter.beats; b++) {\n var g = document.createElement('div'); g.className = 'grp';\n for (var s = 0; s < meter.sub; s++) {\n var i = b * meter.sub + s, c = document.createElement('div');\n c.className = 'cell' + (level(i) === 2 ? ' strong' : level(i) === 1 ? ' mid' : '');\n c.textContent = String(i + 1);\n g.appendChild(c); cells.push(c);\n }\n box.appendChild(g);\n }\n lit = -1;\n }\n\n function showTempo() {\n $('bpmOut').textContent = String(bpm);\n $('tempo').value = String(bpm);\n $('tempo').setAttribute('aria-valuetext', bpm + ' beats a minute, ' + markFor(bpm).name);\n var m = markFor(bpm);\n $('markName').textContent = m.name;\n $('markSay').textContent = m.say;\n $('unit').textContent = meter.sub === 3 ? 'dotted-crotchet beats a minute, clicked in quavers' : 'crotchet beats a minute';\n }\n\n function setTempo(b) { bpm = Math.max(MIN, Math.min(MAX, Math.round(b))); showTempo(); }\n\n function beep(at, lv) {\n if (!sound || !ac || ac.state !== 'running') return;\n var when = ac.currentTime + (at - now());\n if (when < ac.currentTime) return;\n try {\n var o = ac.createOscillator(), g = ac.createGain();\n o.type = 'triangle';\n o.frequency.value = lv === 2 ? 1760 : lv === 1 ? 1320 : 880;\n g.gain.setValueAtTime(0.0001, when);\n g.gain.exponentialRampToValueAtTime(lv === 2 ? 0.6 : 0.35, when + 0.003);\n g.gain.exponentialRampToValueAtTime(0.0001, when + 0.06);\n o.connect(g); g.connect(ac.destination);\n o.start(when); o.stop(when + 0.07);\n } catch (e) { /* no sound: the squares still keep the beat */ }\n }\n\n function schedule() {\n var t = now();\n while (nextTime < t + 0.12) {\n var lv = level(clickIdx);\n queue.push({ t: nextTime, i: clickIdx });\n beep(nextTime, lv);\n nextTime += 60 / bpm / meter.sub;\n clickIdx = (clickIdx + 1) % (meter.beats * meter.sub);\n }\n timer = setTimeout(schedule, 25);\n }\n\n function draw() {\n var t = now();\n while (queue.length && queue[0].t <= t) {\n var q = queue.shift();\n if (lit >= 0 && cells[lit]) cells[lit].classList.remove('on');\n lit = q.i; litAt = q.t;\n if (cells[lit]) cells[lit].classList.add('on');\n }\n var flash = Math.min(0.12, 30 / bpm / meter.sub);\n if (lit >= 0 && t - litAt > flash && cells[lit]) cells[lit].classList.remove('on');\n if (running) raf = requestAnimationFrame(draw);\n }\n\n function startAudio() {\n if (!ac) {\n try { var AC = window.AudioContext || window.webkitAudioContext; if (AC) ac = new AC(); } catch (e) { ac = null; }\n }\n if (ac && ac.state !== 'running' && ac.resume) {\n try { var p = ac.resume(); if (p && p.catch) p.catch(function () {}); } catch (e) {}\n }\n }\n\n function start() {\n startAudio();\n running = true; clickIdx = 0; queue = []; nextTime = now() + 0.08;\n $('start').textContent = 'Stop';\n schedule();\n raf = requestAnimationFrame(draw);\n say('Counting ' + meterName + ' at ' + bpm + ', ' + markFor(bpm).name + '.');\n setTimeout(function () {\n if (!running || !sound) return;\n if (!ac || ac.state !== 'running') say('No sound on this device, so follow the squares: the heavy one is the first beat of the bar.');\n }, 600);\n }\n\n function stop() {\n running = false; clearTimeout(timer); cancelAnimationFrame(raf); queue = [];\n if (lit >= 0 && cells[lit]) cells[lit].classList.remove('on');\n lit = -1;\n $('start').textContent = 'Start';\n say('Stopped at ' + bpm + ', ' + markFor(bpm).name + '.');\n }\n\n $('start').addEventListener('click', function () { if (running) stop(); else start(); });\n $('slower').addEventListener('click', function () { setTempo(bpm - 1); });\n $('faster').addEventListener('click', function () { setTempo(bpm + 1); });\n $('tempo').addEventListener('input', function (e) { setTempo(Number(e.target.value)); });\n $('sound').addEventListener('click', function () {\n sound = !sound;\n this.setAttribute('aria-pressed', String(sound));\n this.textContent = sound ? 'Sound on' : 'Sound off';\n if (sound) startAudio();\n });\n root.querySelectorAll('[data-meter]').forEach(function (b) {\n b.addEventListener('click', function () {\n meterName = b.getAttribute('data-meter'); meter = METERS[meterName];\n root.querySelectorAll('[data-meter]').forEach(function (x) { x.setAttribute('aria-pressed', String(x === b)); });\n buildCells(); showTempo();\n if (running) { clickIdx = 0; queue = []; }\n say(meterName === '6/8' ? '6/8: two dotted-crotchet beats a bar, each clicked as three quavers.' : meterName + ': ' + meter.beats + ' crotchet beats a bar.');\n });\n });\n $('tap').addEventListener('click', function () {\n var t = now();\n if (taps.length && t - taps[taps.length - 1] > 2) taps = [];\n taps.push(t);\n if (taps.length > 5) taps.shift();\n if (taps.length < 2) { say('Keep tapping the beat.'); return; }\n var gap = (taps[taps.length - 1] - taps[0]) / (taps.length - 1);\n var b = 60 / gap;\n if (b < MIN || b > MAX) { say('That is ' + Math.round(b) + ' a minute, outside 40 to 208. Tap again.'); taps = [t]; return; }\n setTempo(b);\n say('Tapped ' + bpm + ', ' + markFor(bpm).name + '.');\n });\n\n document.addEventListener('visibilitychange', function () { if (document.hidden && running) stop(); });\n buildCells(); showTempo();\n})();"
}
```Exercises.
- Play the C major scale hands separately at 60, then at 80. Which tempo word does each speed fall under? (Answers: Largo, Andante.)
- Press Tap tempo in time with the opening of a piece you know, and find its word.
- Set 6/8 at 60 and clap only on the two heavy squares in each bar.
For families. Steady matters more than fast: a scale that stays with the clicks at 60 is worth more than an uneven one at 100. If the page shows the metronome’s code rather than the metronome, any metronome app does the same job.
Piano theory workbookNo. 7
Words and markings
5 sections, 1,280 words, about 6 minutes, filed 30 August, revised 22 September, shared.
Every word and marking the five levels use, in the order students meet them, each labelled with the level that introduces it. The level pages use these words without explaining them again, so this is where a family looks one up.
Words and markings, by level
- p, pianoLevel 1
Soft. Written as a bold italic p under the notes.
- f, forteLevel 1
Loud. Written as a bold italic f.
- mp and mfLevel 2
Mezzo piano, moderately soft, and mezzo forte, moderately loud: the two steps between p and f.
- StaccatoLevel 2
A dot above or below the note: play it short and detached.
- SlurLevel 2
A curved line over or under notes of different pitches: play them smoothly joined, legato.
See also Tie
- TieLevel 2
A curved line joining two notes of the same pitch: play the first and hold it for both values.
See also Slur
- Sharp, flat, naturalLevel 2
A sharp (♯) raises a note a half step, a flat (♭) lowers it a half step, and a natural (♮) cancels either. Written in the music, each lasts for the rest of the bar on that line or space.
- Key signatureLevel 3
The sharps or flats at the start of every line, which apply to those notes in every octave until the key signature changes. G major has one sharp, F♯; F major has one flat, B♭.
- Crescendo, diminuendoLevel 3
Gradually louder; gradually softer. Written cresc. and dim., or as a pair of lines opening out or closing in.
- Tempo wordsLevel 4
Italian words at the top of a piece for how fast it goes, from Largo, broad and very slow, through Andante, at a walking pace, to Presto, very fast.
- Ritardando, a tempoLevel 4
rit.: gradually slower. a tempo: back to the speed before.
- Relative minorLevel 5
The minor key with the same key signature as a major key, starting a minor third below it: A minor for C major, E minor for G major.
Words and markings, by level
p, piano (Level 1): Soft. Written as a bold italic p under the notes.
f, forte (Level 1): Loud. Written as a bold italic f.
mp and mf (Level 2): Mezzo piano, moderately soft, and mezzo forte, moderately loud: the two steps between p and f.
Staccato (Level 2): A dot above or below the note: play it short and detached.
Slur (Level 2): A curved line over or under notes of different pitches: play them smoothly joined, legato.
See also Tie
Tie (Level 2): A curved line joining two notes of the same pitch: play the first and hold it for both values.
See also Slur
Sharp, flat, natural (Level 2): A sharp (♯) raises a note a half step, a flat (♭) lowers it a half step, and a natural (♮) cancels either. Written in the music, each lasts for the rest of the bar on that line or space.
Key signature (Level 3): The sharps or flats at the start of every line, which apply to those notes in every octave until the key signature changes. G major has one sharp, F♯; F major has one flat, B♭.
Crescendo, diminuendo (Level 3): Gradually louder; gradually softer. Written cresc. and dim., or as a pair of lines opening out or closing in.
Tempo words (Level 4): Italian words at the top of a piece for how fast it goes, from Largo, broad and very slow, through Andante, at a walking pace, to Presto, very fast.
Ritardando, a tempo (Level 4): rit.: gradually slower. a tempo: back to the speed before.
Relative minor (Level 5): The minor key with the same key signature as a major key, starting a minor third below it: A minor for C major, E minor for G major.
```element definitions
{
"title": "Words and markings, by level",
"order": "written",
"items": [
{
"term": "p, piano",
"description": "Soft. Written as a bold italic *p* under the notes.",
"label": "Level 1"
},
{
"term": "f, forte",
"description": "Loud. Written as a bold italic *f*.",
"label": "Level 1"
},
{
"term": "mp and mf",
"description": "*Mezzo piano*, moderately soft, and *mezzo forte*, moderately loud: the two steps between *p* and *f*.",
"label": "Level 2"
},
{
"term": "Staccato",
"description": "A dot above or below the note: play it short and detached.",
"label": "Level 2"
},
{
"term": "Slur",
"description": "A curved line over or under notes of different pitches: play them smoothly joined, *legato*.",
"label": "Level 2",
"see": "Tie"
},
{
"term": "Tie",
"description": "A curved line joining two notes of the same pitch: play the first and hold it for both values.",
"label": "Level 2",
"see": "Slur"
},
{
"term": "Sharp, flat, natural",
"description": "A sharp (♯) raises a note a half step, a flat (♭) lowers it a half step, and a natural (♮) cancels either. Written in the music, each lasts for the rest of the bar on that line or space.",
"label": "Level 2"
},
{
"term": "Key signature",
"description": "The sharps or flats at the start of every line, which apply to those notes in every octave until the key signature changes. G major has one sharp, F♯; F major has one flat, B♭.",
"label": "Level 3"
},
{
"term": "Crescendo, diminuendo",
"description": "Gradually louder; gradually softer. Written *cresc.* and *dim.*, or as a pair of lines opening out or closing in.",
"label": "Level 3"
},
{
"term": "Tempo words",
"description": "Italian words at the top of a piece for how fast it goes, from *Largo*, broad and very slow, through *Andante*, at a walking pace, to *Presto*, very fast.",
"label": "Level 4"
},
{
"term": "Ritardando, a tempo",
"description": "*rit.*: gradually slower. *a tempo*: back to the speed before.",
"label": "Level 4"
},
{
"term": "Relative minor",
"description": "The minor key with the same key signature as a major key, starting a minor third below it: A minor for C major, E minor for G major.",
"label": "Level 5"
}
]
}
```Sections
- 1Dynamics: how loud, and how it changesObservation, keyFrom p and f in Level 1 to cresc. and dim. in Level 3, with a piece in each book where you will meet them.
- 2Slurs, ties and staccatoObservation, key, 1 highlightTwo curved lines that look alike and ask for different things. The quickest test: are the two notes the same pitch?
- 3Sharps, flats and naturalsObservationWhy the F in a G major piece is played as F♯ even when no sharp is written beside it.
and 2 more sections
Piano theory workbookLevel 2 — Five-finger patterns and first intervals
6of 9
Major and minor thirds
Observation, key section, 1 highlight, 1 note, 380 words
The idea. A third is two notes that skip one letter name: C to E, D to F, G to B. Some thirds sound bright and some sound darker. The bright ones are major thirds, the darker ones minor thirds, and the difference is one half step.
At the keyboard. Play C and E together with RH 1 and 3. Count the half steps up from C: C♯, D, D♯, E. Four half steps make a major third. Now play C and E♭: three half steps, a minor third.
Exercises.
- Play a major third up from C, F and G. Name the top note each time. (Answers: E, A, B♭.)
- Play D to F, then D to F♯. Which one is major?
- Ask someone at home to play a third while you look away. Bright or darker?
For families. Listen for the two notes sounding together, not one after the other. If an answer is wrong, play both kinds again; do not say which is which.
How it works
Gather the loose sheets from twenty folders into a workbook in five levels, one page per concept in the words you use at lessons. Thirds are counted out in half steps, the markings families ask about sit in one glossary, and the tempo page has a metronome that clicks, accents the first beat and names the Italian word.