wim/bpm-screen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added index.html logic for bpm screen

Browse Source
This commit is contained in:
Wim Wenigerkind
2024-10-29 14:51:48 +01:00
parent 1555e27cf3
commit a75774933c
1 changed files with 94 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
index.html Normal file
View File

@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BPM Taktgeber</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
.bpm-display {
font-size: 950px; /* Taktanzeige in 120px */
margin: 20px;
}
label, input, button {
font-size: 1.5rem;
}
</style>
</head>
<body>
<div class="container">
<h1>BPM Taktgeber</h1>
<label for="bpmInput">BPM:</label>
<input type="number" id="bpmInput" value="60" min="1" max="300" step="1">
<label for="beatsPerMeasure">Takte pro Maß:</label>
<input type="number" id="beatsPerMeasure" value="4" min="1" max="16" step="1">
<div class="buttons">
<button onclick="startBeat()">Start</button>
<button onclick="stopBeat()">Stop</button>
</div>
<div class="bpm-display" id="bpmDisplay">--</div>
</div>
<script>
let intervalId;
let measureCount = 0;
let beatCount = 0;
let countIn = 4; // Anzahl der Einzähler-Schläge
let isCountingIn = true; // Status für Einzähler
function startBeat() {
const bpm = document.getElementById("bpmInput").value;
const beatsPerMeasure = document.getElementById("beatsPerMeasure").value;
if (intervalId) stopBeat(); // Falls bereits gestartet, stoppen
// Reset für Zählung und Einzähler-Status
measureCount = 0;
beatCount = 0;
isCountingIn = true;
// Setze den Intervall-Timer basierend auf BPM
intervalId = setInterval(() => {
if (isCountingIn) {
// Einzählen
document.getElementById("bpmDisplay").textContent = beatCount + 1;
beatCount++;
if (beatCount >= countIn) {
isCountingIn = false;
beatCount = 0;
}
} else {
// Haupt-Takt beginnt nach Einzähler
beatCount++;
if (beatCount > beatsPerMeasure) {
measureCount++;
beatCount = 1;
}
document.getElementById("bpmDisplay").textContent = `${measureCount}/${beatCount}`;
}
}, (60 / bpm) * 1000);
}
function stopBeat() {
clearInterval(intervalId);
document.getElementById("bpmDisplay").textContent = "--";
}
</script>
</body>
</html>