Skip to content

Commit 8107599

Browse files
Techy-ninjaTechy-ninja
committed
Interactive-Drum-Kit
1 parent 9f85677 commit 8107599

File tree

4 files changed

+629
-0
lines changed

4 files changed

+629
-0
lines changed

‎examples/Drum_kit/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Drum Kit — WebAudio demo
2+
3+
This is a small interactive drum kit demo using plain HTML, CSS and JavaScript.
4+
5+
Features
6+
- Play drum sounds by clicking pads or pressing mapped keys:
7+
- W - Crash
8+
- A - Kick
9+
- S - Snare
10+
- D - Mid Tom
11+
- J - HiHat Closed
12+
- K - HiHat Open
13+
- L - Clap
14+
- ; - Low Tom
15+
- Visual button animations on play.
16+
- Record a short sequence and play it back.
17+
- Adjustable master volume control.
18+
- Save and load your drum patterns as JSON files.
19+
- Full keyboard accessibility with ARIA labels and focus indicators.Files
20+
- `index.html` — markup and UI
21+
- `styles.css` — styles and small animations
22+
- `script.js` — Web Audio synths, event handling, recording/playback logic
23+
24+
Usage
25+
1. Open `index.html` in a browser (Chrome, Firefox, Edge). For best results, open it via a web server (e.g. `python -m http.server`) because some browsers restrict AudioContext on file://.
26+
2. Click a pad or press W/A/S/D to play sounds.
27+
3. Press "Record", play some beats, then "Stop" and "Play" to hear them.
28+
29+
Notes
30+
- Sounds are synthesized using the Web Audio API (no external audio files required).
31+
- The demo uses a lazy AudioContext creation strategy — the context starts when you interact with the page.
32+
- Recording stores event times (ms) relative to the moment recording started and schedules playback with the AudioContext time base.
33+
34+
Enjoy!

‎examples/Drum_kit/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Drum Kit</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<main class="container">
11+
<h1 class="title">Drum Kits 🥁</h1>
12+
13+
<div class="kits">
14+
<button class="drum" data-key="w" aria-label="Crash cymbal - Press W">Crash<br><span class="key">W</span></button>
15+
<button class="drum" data-key="a" aria-label="Kick drum - Press A">Kick<br><span class="key">A</span></button>
16+
<button class="drum" data-key="s" aria-label="Snare drum - Press S">Snare<br><span class="key">S</span></button>
17+
<button class="drum" data-key="d" aria-label="Tom drum - Press D">Tom<br><span class="key">D</span></button>
18+
<button class="drum" data-key="j" aria-label="Closed hi-hat - Press J">HiHat C<br><span class="key">J</span></button>
19+
<button class="drum" data-key="k" aria-label="Open hi-hat - Press K">HiHat O<br><span class="key">K</span></button>
20+
<button class="drum" data-key="l" aria-label="Clap - Press L">Clap<br><span class="key">L</span></button>
21+
<button class="drum" data-key=";" aria-label="Low tom - Press semicolon">Low Tom<br><span class="key">;</span></button>
22+
</div>
23+
24+
<div class="volume-control">
25+
<label for="volume">🔊 Volume</label>
26+
<input type="range" id="volume" min="0" max="100" value="90" aria-label="Master volume control">
27+
<span id="volume-value">90%</span>
28+
</div>
29+
30+
<div class="controls">
31+
<button id="record" aria-label="Start recording">● Record</button>
32+
<button id="stop" disabled aria-label="Stop recording">■ Stop</button>
33+
<button id="play" disabled aria-label="Play recording">▶ Play</button>
34+
<button id="clear" disabled aria-label="Clear recording">✕ Clear</button>
35+
<button id="download" disabled aria-label="Download pattern">⬇ Save</button>
36+
<button id="upload" aria-label="Upload pattern">⬆ Load</button>
37+
<input type="file" id="file-input" accept=".json" style="display:none">
38+
<div class="status" id="status">Idle</div>
39+
</div>
40+
41+
<p class="hint">Tip: Click a pad or press the keys on your keyboard to play. Try recording a short beat!</p>
42+
</main>
43+
44+
<script src="script.js"></script>
45+
</body>
46+
</html>

0 commit comments

Comments
 (0)