Skip to content

Interactive-Drum-Kit #338

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sumn2u merged 1 commit into from
Oct 6, 2025
Merged

Interactive-Drum-Kit #338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions examples/Drum_kit/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# Drum Kit — WebAudio demo

This is a small interactive drum kit demo using plain HTML, CSS and JavaScript.

Features
- Play drum sounds by clicking pads or pressing mapped keys:
- W - Crash
- A - Kick
- S - Snare
- D - Mid Tom
- J - HiHat Closed
- K - HiHat Open
- L - Clap
- ; - Low Tom
- Visual button animations on play.
- Record a short sequence and play it back.
- Adjustable master volume control.
- Save and load your drum patterns as JSON files.
- Full keyboard accessibility with ARIA labels and focus indicators.Files
Copy link

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Split the concatenated sentence to fix grammar.

Suggested change
- Full keyboard accessibility with ARIA labels and focus indicators.Files
- Full keyboard accessibility with ARIA labels and focus indicators.
Files

Copilot uses AI. Check for mistakes.
- `index.html` — markup and UI
- `styles.css` — styles and small animations
- `script.js` — Web Audio synths, event handling, recording/playback logic

Usage
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://.
2. Click a pad or press W/A/S/D to play sounds.
Copy link

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The key list is incomplete compared to the mapping in script.js and index.html. Update to include all keys, e.g.: 'Click a pad or press W/A/S/D/J/K/L/; to play sounds.'

Suggested change
2. Click a pad or press W/A/S/D to play sounds.
2. Click a pad or press W/A/S/D/J/K/L/; to play sounds.

Copilot uses AI. Check for mistakes.
3. Press "Record", play some beats, then "Stop" and "Play" to hear them.

Notes
- Sounds are synthesized using the Web Audio API (no external audio files required).
- The demo uses a lazy AudioContext creation strategy — the context starts when you interact with the page.
- Recording stores event times (ms) relative to the moment recording started and schedules playback with the AudioContext time base.

Enjoy!
46 changes: 46 additions & 0 deletions examples/Drum_kit/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Drum Kit</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="container">
<h1 class="title">Drum Kits 🥁</h1>

<div class="kits">
<button class="drum" data-key="w" aria-label="Crash cymbal - Press W">Crash<br><span class="key">W</span></button>
<button class="drum" data-key="a" aria-label="Kick drum - Press A">Kick<br><span class="key">A</span></button>
<button class="drum" data-key="s" aria-label="Snare drum - Press S">Snare<br><span class="key">S</span></button>
<button class="drum" data-key="d" aria-label="Tom drum - Press D">Tom<br><span class="key">D</span></button>
<button class="drum" data-key="j" aria-label="Closed hi-hat - Press J">HiHat C<br><span class="key">J</span></button>
<button class="drum" data-key="k" aria-label="Open hi-hat - Press K">HiHat O<br><span class="key">K</span></button>
<button class="drum" data-key="l" aria-label="Clap - Press L">Clap<br><span class="key">L</span></button>
<button class="drum" data-key=";" aria-label="Low tom - Press semicolon">Low Tom<br><span class="key">;</span></button>
</div>

<div class="volume-control">
<label for="volume">🔊 Volume</label>
<input type="range" id="volume" min="0" max="100" value="90" aria-label="Master volume control">
<span id="volume-value">90%</span>
</div>

<div class="controls">
<button id="record" aria-label="Start recording">● Record</button>
<button id="stop" disabled aria-label="Stop recording">■ Stop</button>
<button id="play" disabled aria-label="Play recording">▶ Play</button>
<button id="clear" disabled aria-label="Clear recording">✕ Clear</button>
<button id="download" disabled aria-label="Download pattern">⬇ Save</button>
<button id="upload" aria-label="Upload pattern">⬆ Load</button>
<input type="file" id="file-input" accept=".json" style="display:none">
<div class="status" id="status">Idle</div>
</div>

<p class="hint">Tip: Click a pad or press the keys on your keyboard to play. Try recording a short beat!</p>
</main>

<script src="script.js"></script>
</body>
</html>
Loading