Janady13 commited on
Commit ·
3674982
1
Parent(s): 269472d
Jenny's DrumSteps: free browser drum machine
Browse files- README.md +12 -5
- index.html +31 -19
README.md
CHANGED
|
@@ -1,10 +1,17 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: Jenny's DrumSteps
|
| 3 |
+
emoji: 🥁
|
| 4 |
+
colorFrom: pink
|
| 5 |
+
colorTo: purple
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
license: mit
|
| 9 |
+
short_description: Free browser drum machine with live MIDI
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Jenny's DrumSteps
|
| 13 |
+
|
| 14 |
+
A free, no-signup browser drum machine. Every voice is synthesized live with the Web Audio API (no samples),
|
| 15 |
+
and you can play it with a real electronic drum kit over USB via the Web MIDI API.
|
| 16 |
+
|
| 17 |
+
Launch it from the Space, or go straight to https://jennysdrumsteps.thatwebhostingguy.com/app/
|
index.html
CHANGED
|
@@ -1,19 +1,31 @@
|
|
| 1 |
-
<!doctype html>
|
| 2 |
-
<
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
</
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
| 2 |
+
<title>Jenny's DrumSteps — Free Browser Drum Machine</title>
|
| 3 |
+
<style>
|
| 4 |
+
*{box-sizing:border-box;margin:0;padding:0}
|
| 5 |
+
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:radial-gradient(1200px 600px at 50% -10%,#3a1d54,#160d24);color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px;text-align:center}
|
| 6 |
+
.card{max-width:640px}
|
| 7 |
+
.bar{height:8px;width:160px;margin:0 auto 26px;border-radius:8px;background:linear-gradient(90deg,#EC407A,#F7941E,#FCC419,#5BBF4A,#29ABE2,#7B3FA0)}
|
| 8 |
+
.emoji{font-size:72px;line-height:1}
|
| 9 |
+
h1{font-size:clamp(34px,7vw,56px);margin:6px 0 4px;background:linear-gradient(90deg,#EC407A,#FCC419,#29ABE2);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
|
| 10 |
+
p.lede{font-size:clamp(16px,3vw,20px);color:#d6cbe8;margin:10px auto 6px;max-width:30ch}
|
| 11 |
+
.btn{display:inline-block;margin:26px 0 10px;background:#EC407A;color:#fff;font-weight:800;font-size:22px;text-decoration:none;padding:16px 36px;border-radius:999px;box-shadow:0 12px 30px rgba(236,64,122,.4);transition:transform .15s}
|
| 12 |
+
.btn:hover{transform:translateY(-2px)}
|
| 13 |
+
.feat{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
|
| 14 |
+
.chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 16px;font-size:14px;color:#e7def5}
|
| 15 |
+
.note{margin-top:18px;font-size:13px;color:#9b8fb5}
|
| 16 |
+
a.plain{color:#c8b6e8}
|
| 17 |
+
</style></head>
|
| 18 |
+
<body><main class="card">
|
| 19 |
+
<div class="bar"></div>
|
| 20 |
+
<div class="emoji">🥁</div>
|
| 21 |
+
<h1>Jenny's DrumSteps</h1>
|
| 22 |
+
<p class="lede">A free browser drum machine. Every sound is synthesized live, and you can play it with a real MIDI kit.</p>
|
| 23 |
+
<a class="btn" href="https://jennysdrumsteps.thatwebhostingguy.com/app/" target="_blank" rel="noopener">🥁 Play the Drum Machine</a>
|
| 24 |
+
<div class="feat">
|
| 25 |
+
<span class="chip">Web Audio synthesis, no samples</span>
|
| 26 |
+
<span class="chip">Live MIDI electronic kit input</span>
|
| 27 |
+
<span class="chip">Keyboard + touch</span>
|
| 28 |
+
<span class="chip">No install, no signup</span>
|
| 29 |
+
</div>
|
| 30 |
+
<p class="note">Web MIDI works in Chrome and Edge on desktop, or Chrome on Android. Built by <a class="plain" href="https://thatdeveloperguy.com" target="_blank" rel="noopener">ThatDeveloperGuy</a>.</p>
|
| 31 |
+
</main></body></html>
|