added index.html logic for bpm screen

2024-10-29 14:51:48 +01:00
parent 1555e27cf3
commit a75774933c
1 changed files with 94 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -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>