rdrew
/
robs_metronome
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
5 Commits
1 Branch
0 Tags
158 KiB
 
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
robs_metronome/robs_metronome.html

614 lines
17 KiB
Raw Permalink Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Session Tempo</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&family=Work+Sans:wght@400;500;600&display=swap");
:root {
--parchment: #ede3d3;
--panel: #f7f1e3;
--ink: #2e2418;
--ink-soft: #5a4b39;
--walnut: #4a3222;
--brass: #a9793c;
--brass-light: #c9a16a;
--moss: #5f6f52;
--rule: rgba(46, 36, 24, 0.18);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--parchment);
color: var(--ink);
font-family: "Work Sans", sans-serif;
display: flex;
justify-content: center;
padding: 32px 16px 64px;
}
.page {
width: 100%;
max-width: 560px;
}
h1 {
font-family: "Fraunces", serif;
font-weight: 500;
font-size: 1.6rem;
text-align: center;
margin: 0 0 4px;
letter-spacing: 0.01em;
}
.subtitle {
text-align: center;
color: var(--ink-soft);
font-size: 0.9rem;
margin: 0 0 28px;
}
.hero {
background: var(--panel);
border: 1px solid var(--rule);
border-radius: 4px;
padding: 32px 24px 28px;
text-align: center;
}
.bpm-num {
font-family: "Fraunces", serif;
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: 5rem;
line-height: 1;
color: var(--walnut);
user-select: none;
}
.bpm-label {
font-size: 0.8rem;
color: var(--ink-soft);
margin-top: 2px;
margin-bottom: 20px;
}
.tap-pad {
width: 120px;
height: 120px;
margin: 0 auto 24px;
border-radius: 50%;
border: 2px solid var(--brass);
color: var(--walnut);
font-family: "Work Sans";
font-size: 0.85rem;
background: transparent;
cursor: pointer;
transition:
transform 0.06s ease,
background 0.15s ease;
}
.tap-pad.pulse {
background: var(--brass-light);
transform: scale(0.96);
}
.row {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 22px;
}
.stepper {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--rule);
background: var(--parchment);
color: var(--walnut);
font-size: 1.2rem;
cursor: pointer;
}
.stepper:active {
background: var(--brass-light);
}
input[type="range"] {
flex: 1;
max-width: 220px;
accent-color: var(--brass);
}
.meta-row {
display: flex;
justify-content: center;
gap: 24px;
margin-bottom: 22px;
font-size: 0.85rem;
color: var(--ink-soft);
}
.meta-row label {
display: flex;
align-items: center;
gap: 6px;
}
.meta-row input[type="number"] {
width: 46px;
text-align: center;
border: 1px solid var(--rule);
background: var(--parchment);
color: var(--ink);
border-radius: 3px;
padding: 3px;
font-family: inherit;
}
.start-btn {
font-family: "Work Sans";
font-weight: 600;
font-size: 0.95rem;
color: var(--parchment);
background: var(--walnut);
border: none;
border-radius: 4px;
padding: 12px 36px;
cursor: pointer;
letter-spacing: 0.02em;
}
.start-btn.playing {
background: var(--moss);
}
.divider {
border: none;
border-top: 1px solid var(--rule);
margin: 36px 0 18px;
}
h2 {
font-family: "Fraunces", serif;
font-weight: 500;
font-size: 1.1rem;
margin: 0 0 14px;
}
.tune-list {
display: flex;
flex-direction: column;
}
.tune-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--rule);
}
.tune-row:last-child {
border-bottom: none;
}
.tune-name {
flex: 1;
font-size: 0.95rem;
}
.tune-bpm {
font-variant-numeric: tabular-nums;
color: var(--ink-soft);
font-size: 0.9rem;
min-width: 60px;
text-align: right;
}
.tune-btn {
background: none;
border: 1px solid var(--rule);
color: var(--ink);
font-size: 0.78rem;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
font-family: "Work Sans";
}
.tune-btn:hover {
border-color: var(--brass);
}
.tune-del {
background: none;
border: none;
color: var(--ink-soft);
font-size: 1rem;
cursor: pointer;
line-height: 1;
padding: 0 4px;
}
.add-row {
display: flex;
gap: 8px;
margin-top: 16px;
}
.add-row input[type="text"] {
flex: 1;
border: 1px solid var(--rule);
background: var(--panel);
padding: 9px 10px;
border-radius: 3px;
font-family: inherit;
font-size: 0.9rem;
color: var(--ink);
}
.add-row button {
background: var(--brass);
color: var(--panel);
border: none;
border-radius: 3px;
padding: 0 16px;
font-family: "Work Sans";
font-weight: 500;
font-size: 0.85rem;
cursor: pointer;
}
.empty {
color: var(--ink-soft);
font-size: 0.88rem;
padding: 8px 0;
}
.status {
text-align: center;
font-size: 0.78rem;
color: var(--ink-soft);
margin-top: 10px;
min-height: 1em;
}
</style>
</head>
<body>
<div class="page">
<h1>Rob's Metronome</h1>
<p class="subtitle">A metronome that remembers the tune</p>
<div class="hero">
<div class="bpm-num" id="bpmNum">120</div>
<div class="bpm-label">beats per minute</div>
<button class="tap-pad" id="tapPad">tap tempo</button>
<div class="row">
<button class="stepper" id="bpmDown">–</button>
<input type="range" id="bpmSlider" min="30" max="300" value="120" />
<button class="stepper" id="bpmUp">+</button>
</div>
<div class="meta-row">
<label
>beats per bar
<input type="number" id="beatsPerBar" min="1" max="12" value="4"
/></label>
<label
>volume
<input
type="range"
id="volumeSlider"
min="0"
max="100"
value="70"
style="width: 80px"
/></label>
</div>
<button class="start-btn" id="startBtn">Start</button>
</div>
<hr class="divider" />
<h2>Your tunes</h2>
<div class="tune-list" id="tuneList">
<div class="empty" id="emptyMsg">Loading…</div>
</div>
<div class="add-row">
<input
type="text"
id="newTuneName"
placeholder="Tune name (e.g. Drowsy Maggie)"
/>
<button id="saveTuneBtn">Save at current tempo</button>
</div>
<div class="add-row" style="margin-top: 8px">
<button class="tune-btn" id="exportBtn" style="flex: 1">
Export tunes.json
</button>
<button class="tune-btn" id="importBtn" style="flex: 1">
Import tunes.json
</button>
<input
type="file"
id="importFile"
accept="application/json"
style="display: none"
/>
<a href="https://tuner-online.com/#sounds" target="_blank">
<button>Guitar Tuner</button>
</a>
</div>
<div class="status" id="statusMsg"></div>
</div>
<script>
// ---------- Metronome engine ----------
let audioCtx = null;
let isPlaying = false;
let bpm = 120;
let beatsPerBar = 4;
let volume = 0.7;
let currentBeat = 0;
let nextNoteTime = 0;
let schedulerTimer = null;
const lookahead = 25; // ms
const scheduleAheadTime = 0.1; // seconds
function ensureAudio() {
if (!audioCtx)
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}
function playClick(time, accented) {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.frequency.value = accented ? 1500 : 1000;
gain.gain.setValueAtTime(0.0001, time);
gain.gain.exponentialRampToValueAtTime(
Math.max(0.0002, (accented ? 0.5 : 0.3) * volume),
time + 0.002,
);
gain.gain.exponentialRampToValueAtTime(0.0001, time + 0.05);
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.start(time);
osc.stop(time + 0.06);
}
function scheduler() {
while (nextNoteTime < audioCtx.currentTime + scheduleAheadTime) {
playClick(nextNoteTime, currentBeat === 0);
const beatToFlash = currentBeat;
const delay = (nextNoteTime - audioCtx.currentTime) * 1000;
setTimeout(() => flashPad(beatToFlash === 0), Math.max(0, delay));
nextNoteTime += 60.0 / bpm;
currentBeat = (currentBeat + 1) % beatsPerBar;
}
schedulerTimer = setTimeout(scheduler, lookahead);
}
function flashPad(accented) {
tapPad.classList.add("pulse");
setTimeout(() => tapPad.classList.remove("pulse"), accented ? 110 : 70);
}
function startMetronome() {
ensureAudio();
if (audioCtx.state === "suspended") audioCtx.resume();
currentBeat = 0;
nextNoteTime = audioCtx.currentTime + 0.05;
scheduler();
isPlaying = true;
startBtn.textContent = "Stop";
startBtn.classList.add("playing");
}
function stopMetronome() {
clearTimeout(schedulerTimer);
isPlaying = false;
startBtn.textContent = "Start";
startBtn.classList.remove("playing");
}
// ---------- UI wiring ----------
const bpmNum = document.getElementById("bpmNum");
const bpmSlider = document.getElementById("bpmSlider");
const bpmDown = document.getElementById("bpmDown");
const bpmUp = document.getElementById("bpmUp");
const beatsPerBarInput = document.getElementById("beatsPerBar");
const startBtn = document.getElementById("startBtn");
const tapPad = document.getElementById("tapPad");
const statusMsg = document.getElementById("statusMsg");
function setBpm(val) {
bpm = Math.max(30, Math.min(300, Math.round(val)));
bpmNum.textContent = bpm;
bpmSlider.value = bpm;
}
bpmSlider.addEventListener("input", (e) => setBpm(e.target.value));
bpmDown.addEventListener("click", () => setBpm(bpm - 1));
bpmUp.addEventListener("click", () => setBpm(bpm + 1));
beatsPerBarInput.addEventListener("change", (e) => {
beatsPerBar = Math.max(1, Math.min(12, parseInt(e.target.value) || 4));
});
const volumeSlider = document.getElementById("volumeSlider");
volumeSlider.addEventListener("input", (e) => {
volume = parseInt(e.target.value) / 100;
});
startBtn.addEventListener("click", () => {
if (isPlaying) stopMetronome();
else startMetronome();
});
// Tap tempo
let tapTimes = [];
tapPad.addEventListener("click", () => {
const now = performance.now();
tapTimes.push(now);
tapTimes = tapTimes.filter((t) => now - t < 2500);
if (tapTimes.length > 1) {
const intervals = [];
for (let i = 1; i < tapTimes.length; i++)
intervals.push(tapTimes[i] - tapTimes[i - 1]);
const avg = intervals.reduce((a, b) => a + b, 0) / intervals.length;
setBpm(60000 / avg);
}
flashPad(false);
});
// ---------- Tune storage (browser-local cache + JSON export/import) ----------
const tuneList = document.getElementById("tuneList");
const emptyMsg = document.getElementById("emptyMsg");
const newTuneName = document.getElementById("newTuneName");
const saveTuneBtn = document.getElementById("saveTuneBtn");
const exportBtn = document.getElementById("exportBtn");
const importBtn = document.getElementById("importBtn");
const importFile = document.getElementById("importFile");
const STORAGE_KEY = "session-tempo-tunes";
let tunes = [];
function loadTunes() {
try {
const raw = localStorage.getItem(STORAGE_KEY);
tunes = raw ? JSON.parse(raw) : [];
} catch (err) {
tunes = [];
}
renderTunes();
}
function persistTunes() {
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(tunes));
} catch (err) {
showStatus("Could not save locally — try again.");
}
}
exportBtn.addEventListener("click", () => {
const blob = new Blob([JSON.stringify(tunes, null, 2)], {
type: "application/json",
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "tunes.json";
a.click();
URL.revokeObjectURL(url);
showStatus("Exported tunes.json — move it into your repo and commit.");
});
importBtn.addEventListener("click", () => importFile.click());
importFile.addEventListener("change", () => {
const file = importFile.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
try {
const parsed = JSON.parse(reader.result);
if (!Array.isArray(parsed)) throw new Error("not an array");
tunes = parsed;
persistTunes();
renderTunes();
showStatus(
"Imported " +
tunes.length +
" tune" +
(tunes.length === 1 ? "" : "s") +
".",
);
} catch (err) {
showStatus("That file didn't look like a valid tunes.json.");
}
};
reader.readAsText(file);
importFile.value = "";
});
function showStatus(msg) {
statusMsg.textContent = msg;
setTimeout(() => {
if (statusMsg.textContent === msg) statusMsg.textContent = "";
}, 2500);
}
function renderTunes() {
tuneList.innerHTML = "";
if (tunes.length === 0) {
const p = document.createElement("div");
p.className = "empty";
p.textContent =
"No tunes saved yet — set a tempo above and save it below.";
tuneList.appendChild(p);
return;
}
tunes.forEach((tune) => {
const row = document.createElement("div");
row.className = "tune-row";
const name = document.createElement("div");
name.className = "tune-name";
name.textContent = tune.name;
const bpmSpan = document.createElement("div");
bpmSpan.className = "tune-bpm";
bpmSpan.textContent = tune.bpm + " bpm";
const loadBtn = document.createElement("button");
loadBtn.className = "tune-btn";
loadBtn.textContent = "Load";
loadBtn.addEventListener("click", () => setBpm(tune.bpm));
const updateBtn = document.createElement("button");
updateBtn.className = "tune-btn";
updateBtn.textContent = "Update";
updateBtn.addEventListener("click", () => {
tune.bpm = bpm;
persistTunes();
renderTunes();
showStatus(tune.name + " updated to " + bpm + " bpm.");
});
const delBtn = document.createElement("button");
delBtn.className = "tune-del";
delBtn.textContent = "×";
delBtn.title = "Remove";
delBtn.addEventListener("click", () => {
tunes = tunes.filter((t) => t.id !== tune.id);
persistTunes();
renderTunes();
});
row.appendChild(name);
row.appendChild(bpmSpan);
row.appendChild(loadBtn);
row.appendChild(updateBtn);
row.appendChild(delBtn);
tuneList.appendChild(row);
});
}
saveTuneBtn.addEventListener("click", () => {
const name = newTuneName.value.trim();
if (!name) {
showStatus("Give the tune a name first.");
return;
}
tunes.push({ id: Date.now().toString(36), name, bpm });
persistTunes();
renderTunes();
newTuneName.value = "";
showStatus(name + " saved at " + bpm + " bpm.");
});
newTuneName.addEventListener("keydown", (e) => {
if (e.key === "Enter") saveTuneBtn.click();
});
// init
setBpm(120);
loadTunes();
</script>
</body>
</html>