initial commit

code4music · Dec 24, 2024 · 74047f1 · 74047f1
commit 74047f1
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# Metronomo
+
+Um simples metronomo web.
diff --git a/assets/audio/tick-strong.mp3 b/assets/audio/tick-strong.mp3
diff --git a/assets/audio/tick-weak.mp3 b/assets/audio/tick-weak.mp3
diff --git a/assets/css/metronome.css b/assets/css/metronome.css
@@ -0,0 +1,14 @@
+.visualizer {
+  width: 50px;
+  height: 50px;
+  background-color: #0d6efd;
+  border-radius: 50%;
+  margin: 20px auto;
+  transform-origin: center;
+  animation: none;
+}
+@keyframes metronome {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.5); }
+  100% { transform: scale(1); }
+}
diff --git a/assets/js/metronome.js b/assets/js/metronome.js
@@ -0,0 +1,49 @@
+const bpmInput = document.getElementById("bpmInput");
+const timeSignature = document.getElementById("timeSignature");
+const startButton = document.getElementById("startButton");
+const stopButton = document.getElementById("stopButton");
+const visualizer = document.querySelector(".visualizer");
+
+let intervalId = null;
+
+const tickStrong = new Audio("assets/audio/tick-strong.mp3");
+const tickWeak = new Audio("assets/audio/tick-weak.mp3");
+
+startButton.addEventListener("click", () => {
+  const bpm = parseInt(bpmInput.value);
+  const beatsPerMeasure = parseInt(timeSignature.value);
+
+  if (isNaN(bpm) || bpm <= 0) {
+    alert("Por favor, insira um BPM válido (maior que 0).");
+    return;
+  }
+
+  const interval = (60 / bpm) * 1000;
+  let currentBeat = 0;
+  visualizer.style.animation = `metronome ${interval / 1000}s infinite`;
+
+  intervalId = setInterval(() => {
+    if (currentBeat === 0) {
+      tickStrong.currentTime = 0;
+      tickStrong.play();
+      visualizer.style.backgroundColor = "#ff0000";
+    } else {
+      tickWeak.currentTime = 0;
+      tickWeak.play();
+      visualizer.style.backgroundColor = "#0d6efd";
+    }
+
+    currentBeat = (currentBeat + 1) % beatsPerMeasure;
+  }, interval);
+
+  startButton.disabled = true;
+  stopButton.disabled = false;
+});
+
+stopButton.addEventListener("click", () => {
+  clearInterval(intervalId);
+  visualizer.style.animation = "none";
+  visualizer.style.backgroundColor = "#0d6efd";
+  startButton.disabled = false;
+  stopButton.disabled = true;
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Metronome</title>
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link href="assets/css/metronome.css" rel="stylesheet">
+</head>
+<body>
+  <div class="container text-center mt-3">
+    <div class="mb-3">
+      <label for="bpmInput" class="form-label">Tempo (BPM):</label>
+      <input type="number" class="form-control w-25 mx-auto" id="bpmInput" placeholder="Insira o BPM" min="1" value="120">
+    </div>
+    <div class="mb-3">
+      <label for="timeSignature" class="form-label">Compasso:</label>
+      <select class="form-select w-25 mx-auto" id="timeSignature">
+        <option value="4">4/4</option>
+        <option value="3">3/4</option>
+        <option value="6">6/8</option>
+      </select>
+    </div>
+    <button class="btn btn-primary" id="startButton">Iniciar</button>
+    <button class="btn btn-danger" id="stopButton" disabled>Parar</button>
+    <div class="visualizer mt-4"></div>
+  </div>
+  <script src="assets/js/metronome.js"></script>
+</body>
+</html>