Compare all models on this prompt →
Drum machine · minimax-m3
Build a 16-step drum machine with a clickable grid for kick, snare, hi-hat, and clap, all sounds synthesized with the Web Audio API, plus play/stop and an adjustable BPM.
⛨ sandboxed Open in new tab ↗
transcript · 12 messages
user
Build a 16-step drum machine with a clickable grid for kick, snare, hi-hat, and clap, all sounds synthesized with the Web Audio API, plus play/stop and an adjustable BPM.
assistant
thinking
The user wants a 16-step drum machine in a single index.html file. Let me plan this out:
1. **Structure**:
- 4 rows (kick, snare, hi-hat, clap) × 16 columns (steps)
- Clickable grid for each cell
- Play/Stop button
- BPM slider/input
- Visual feedback for current step
2. **Web Audio API**:
- All sounds synthesized (no samples)
- Kick: low sine/triangle with pitch envelope
- Snare: noise + tonal component
- Hi-hat: high-frequency noise with short envelope
- Clap: filtered noise bursts
3. **Features**:
- Step sequencer with playhead
- Adjustable BPM (60-200)
- Clear pattern button
- Maybe randomize
- Volume control would be nice
Let me design a nice UI - dark theme with neon accents works well for a drum machine aesthetic. Let me make it look professional and modern.
I'll use a scheduling approach with `currentTime` for tight timing. The standard pattern is to use a "lookahead" scheduler.
Let me write this out:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>16-Step Drum Machine</title>
<style>
/* Dark theme with neon accents */
body { ... }
.grid { ... }
...
</style>
</head>
<body>
<div class="machine">
<header>
<h1>STEP-16</h1>
<p>Web Audio Drum Machine</p>
</header>
<div class="controls">
<button id="play">PLAY</button>
<div class="bpm">
<label>BPM</label>
<input type="range" min="60" max="200" value="120" id="bpm">
<span id="bpmValue">120</span>
</div>
<button id="clear">CLEAR</button>
<button id="random">RANDOM</button>
</div>
<div class="grid">
<!-- 4 rows × 16 cols of buttons -->
</div>
</div>
<script>
// Audio context setup
// Voice synthesis functions
// Sequencer
</script>
</body>
</html>
```
For the audio synthesis:
- **Kick**: Sine oscillator with quick pitch envelope (150Hz → 50Hz), short amp envelope
- **Snare**: White noise through bandpass + sine at ~200Hz
- **Hi-hat**: White noise through highpass, very short envelope
- **Clap**: Multiple short noise bursts with bandpass filter, slight reverb feel
Let me build this out fully. I want it to look really polished.
For the grid layout, I'll use CSS grid. Each row is one drum voice, each column is one step. Steps will be grouped visually in 4s (1, 2, 3, 4 quarter notes).
Color scheme - dark background, distinct color per drum:
- Kick: orange/red
- Snare: cyan/teal
- Hi-hat: yellow
- Clap: pink/magenta
Active cells will glow.
Let me write the code now.
I need to be careful with the scheduler. Standard approach:
- `nextNoteTime`: audio time of next step
- `currentStep`: which step we're on (0-15)
- `scheduleAheadTime`: how far ahead to schedule (0.1s)
- `lookahead`: how often to call the scheduler (25ms)
- Use `setInterval` for scheduling, but trigger actual sounds at `nextNoteTime`
Let me draft the full HTML now. I'll make sure it's self-contained and runs without network.
For hi-hat variation, I'll add open hi-hat on every other step or something. Actually, let me keep it simple - closed hat on every active step. Maybe add a closed/open variation if there's time.
Let me think about the visual design more:
- Big play button that changes to STOP when playing
- BPM slider with digital readout
- Pattern grid with each row labeled
- Step numbers (1-16) above
- Group separators between beat 4/8/12
- Current step highlighted with a moving indicator
Let me code this now. I'll be thorough.
```javascript
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const masterGain = audioCtx.createGain();
masterGain.gain.value = 0.7;
masterGain.connect(audioCtx.destination);
function playKick(time) {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.type = 'sine';
osc.frequency.setValueAtTime(150, time);
osc.frequency.exponentialRampToValueAtTime(0.001, time + 0.5);
gain.gain.setValueAtTime(1, time);
gain.gain.exponentialRampToValueAtTime(0.001, time + 0.5);
osc.connect(gain).connect(masterGain);
osc.start(time);
osc.stop(time + 0.5);
}
function playSnare(time) {
// Noise
const bufferSize = audioCtx.sampleRate * 0.2;
const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
const data = buffer.getChannelData(0);
for (let i = 0; i < bufferSize; i++) {
data[i] = Math.random() * 2 - 1;
}
const noise = audioCtx.createBufferSource();
noise.buffer = buffer;
const noiseFilter = audioCtx.createBiquadFilter();
noiseFilter.type = 'highpass';
noiseFilter.frequency.value = 1000;
const noiseGain = audioCtx.createGain();
noiseGain.gain.setValueAtTime(0.5, time);
noiseGain.gain.exponentialRampToValueAtTime(0.001, time + 0.2);
noise.connect(noiseFilter).connect(noiseGain).connect(masterGain);
noise.start(time);
// Tonal
const osc = audioCtx.createOscillator();
osc.type = 'triangle';
osc.frequency.value = 200;
const oscGain = audioCtx.createGain();
oscGain.gain.setValueAtTime(0.3, time);
oscGain.gain.exponentialRampToValueAtTime(0.001, time + 0.1);
osc.connect(oscGain).connect(masterGain);
osc.start(time);
osc.stop(time + 0.1);
}
function playHihat(time) {
const bufferSize = audioCtx.sampleRate * 0.1;
const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
const data = buffer.getChannelData(0);
for (let i = 0; i < bufferSize; i++) {
data[i] = Math.random() * 2 - 1;
}
const noise = audioCtx.createBufferSource();
noise.buffer = buffer;
const filter = audioCtx.createBiquadFilter();
filter.type = 'highpass';
filter.frequency.value = 7000;
const gain = audioCtx.createGain();
gain.gain.setValueAtTime(0.3, time);
gain.gain.exponentialRampToValueAtTime(0.001, time + 0.05);
noise.connect(filter).connect(gain).connect(masterGain);
noise.start(time);
}
function playClap(time) {
// Multiple short bursts
for (let i = 0; i < 3; i++) {
const t = time + i * 0.01;
const bufferSize = audioCtx.sampleRate * 0.05;
const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
const data = buffer.getChannelData(0);
for (let j = 0; j < bufferSize; j++) {
data[j] = Math.random() * 2 - 1;
}
const noise = audioCtx.createBufferSource();
noise.buffer = buffer;
const filter = audioCtx.createBiquadFilter();
filter.type = 'bandpass';
filter.frequency.value = 1500;
filter.Q.value = 2;
const gain = audioCtx.createGain();
gain.gain.setValueAtTime(0.5 / (i + 1), t);
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
noise.connect(filter).connect(gain).connect(masterGain);
noise.start(t);
}
}
```
For scheduling:
```javascript
let isPlaying = false;
let bpm = 120;
let currentStep = 0;
let nextNoteTime = 0;
let timerID = null;
function scheduleStep(step, time) {
['kick', 'snare', 'hihat', 'clap'].forEach((voice, i) => {
if (pattern[i][step]) {
switch (voice) {
case 'kick': playKick(time); break;
case 'snare': playSnare(time); break;
case 'hihat': playHihat(time); break;
case 'clap': playClap(time); break;
}
}
});
}
function scheduler() {
while (nextNoteTime < audioCtx.currentTime + 0.1) {
scheduleStep(currentStep, nextNoteTime);
nextStep();
}
timerID = setTimeout(scheduler, 25);
}
function nextStep() {
nextNoteTime += 60 / bpm / 4; // 16th notes
currentStep = (currentStep + 1) % 16;
// Visual update happens elsewhere
}
function play() {
isPlaying = true;
audioCtx.resume();
currentStep = 0;
nextNoteTime = audioCtx.currentTime;
scheduler();
// Start visual update loop
requestAnimationFrame(drawPlayhead);
}
```
Hmm, the visual playhead needs to be in sync with audio. I'll track which step is currently being heard by comparing currentTime to scheduled times. Or simpler: maintain a queue of "step events" with their times.
Let me simplify: I'll use the requestAnimationFrame loop to compare audioCtx.currentTime with the scheduled nextNoteTime, and when it passes, advance the playhead.
Actually a simpler approach: store the scheduled times in an array, and during rAF, find which step time is closest to currentTime.
Or even simpler: maintain `stepStartedAt` time per step. Just track:
- `lastStepTime`: when the last step started
- At rAF, check if `(audioCtx.currentTime - lastStepTime) >= stepDuration`. If so, advance and update display.
```javascript
let lastStepTime = 0;
function play() {
isPlaying = true;
audioCtx.resume();
currentStep = 0;
nextNoteTime = audioCtx.currentTime;
lastStepTime = audioCtx.currentTime;
scheduler();
requestAnimationFrame(drawPlayhead);
}
function drawPlayhead() {
if (!isPlaying) return;
const stepDuration = 60 / bpm / 4;
const elapsed = audioCtx.currentTime - lastStepTime;
// Find current step
let stepIdx = Math.floor(elapsed / stepDuration);
// Update DOM
document.querySelectorAll('.step').forEach((el, i) => {
el.classList.toggle('playing', isPlaying && (i % 16) === stepIdx);
});
requestAnimationFrame(drawPlayhead);
}
```
Hmm but `currentStep` already advances in scheduler. I could just expose that and update DOM in rAF:
```javascript
function drawPlayhead() {
if (!isPlaying) return;
document.querySelectorAll('.playhead').forEach(el => el.classList.remove('playing'));
const stepCells = document.querySelectorAll(`.step[data-step="${currentStep}"]`);
stepCells.forEach(el => el.classList.add('playing'));
requestAnimationFrame(drawPlayhead);
}
```
But currentStep advances asynchronously. Let me use a different approach - track `scheduledSteps[]` array of {step, time} and check which is current:
Actually let me keep it simple and use `currentStep` from scheduler with a sync mechanism. Since both scheduler and rAF run on main thread, this should be ok. Let me think...
The scheduler increments `currentStep` when the step is scheduled (i.e., the previous step's time has passed). So when scheduler runs, `currentStep` represents the next step to play.
Let me adjust:
- `currentStep` = the step about to play / just played
- After scheduling, advance
In rAF, just display `currentStep - 1` (the one that just played) or use the time-based approach.
Time-based approach is more accurate:
```javascript
function drawPlayhead() {
if (!isPlaying) return;
const stepDuration = 60 / bpm / 4;
// Reference time when step 0 was scheduled
const stepAt = audioCtx.currentTime;
// We need to track when step 0 started
...
}
```
OK let me just track scheduled events in an array:
```javascript
const scheduledSteps = []; // {step, time}
function scheduler() {
while (nextNoteTime < audioCtx.currentTime + 0.1) {
scheduleStep(currentStep, nextNoteTime);
scheduledSteps.push({step: currentStep, time: nextNoteTime});
// Clean up old entries
if (scheduledSteps.length > 20) scheduledSteps.shift();
nextStep();
}
timerID = setTimeout(scheduler, 25);
}
function drawPlayhead() {
if (!isPlaying) return;
const now = audioCtx.currentTime;
// Find the step that's currently playing (most recent whose time <= now)
let active = -1;
for (const s of scheduledSteps) {
if (s.time <= now) active = s.step;
}
document.querySelectorAll('.step').forEach((el) => {
const isActive = parseInt(el.dataset.step) === active;
el.classList.toggle('playhead', isActive);
});
requestAnimationFrame(drawPlayhead);
}
```
This is cleaner. Let me go with this.
OK, now let me think about the UI design more carefully. I want it to look professional, like a real drum machine. Let me draw inspiration from TR-808/909 style.
Layout:
```
+---------------------------------+
| STEP-16 [play] [stop] |
| BPM: 120 [slider] |
|---------------------------------|
| KICK □ □ □ □ □ □ □ □ □ □ □ □ |
| SNARE □ □ □ □ □ □ □ □ □ □ □ □ |
| HAT □ □ □ □ □ □ □ □ □ □ □ □ |
| CLAP □ □ □ □ □ □ □ □ □ □ □ □ |
|---------------------------------|
| 1 2 3 4 (beat markers) |
+---------------------------------+
```
Or with colors:
- Use a grid: each row has 16 cells, with labels on the left
- Beat groups (1-4, 5-8, 9-12, 13-16) visually separated
I'll do something like that.
Let me also add a master volume slider, swing maybe, and clear/random buttons.
Here's the final design plan:
- Dark theme (#0a0a14 background)
- Card with subtle gradient
- Title "STEP-16" with subtitle
- Controls bar: Play/Stop, BPM slider with digital readout, Clear, Random, Volume
- Grid: 4 rows × 16 cols
- Each row labeled with drum name and an icon-ish indicator
- Step numbers below
- Active steps glow with the row's color
- Current step has bright outline/animation
- Beat group separators (between 4/8/12)
Colors per voice:
- Kick: #ff5e3a (orange-red)
- Snare: #4dd0e1 (cyan)
- Hi-hat: #ffd54f (yellow)
- Clap: #ec407a (pink)
Let me also think about:
- Save/load patterns? Too much. Skip.
- Different patterns to switch between? Could be cool but maybe too much. I'll add a "RANDOM" button that fills with a sensible pattern.
Actually, let me add 4 pattern slots that you can switch between, and one of them stores the current pattern. Each click stores the current pattern in that slot. This would be a nice feature. But it might overcomplicate.
Let me stick with: Play/Stop, BPM, Clear, Random. Maybe volume too.
OK let me write the full HTML now. I'll be thorough with the design.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STEP-16 · Drum Machine</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0a0a14;
--bg-2: #13132a;
--panel: #1a1a35;
--border: #2a2a55;
--text: #e8e8f0;
--muted: #8888aa;
--accent: #00ffaa;
--kick: #ff5e3a;
--snare: #4dd0e1;
--hihat: #ffd54f;
--clap: #ec407a;
}
html, body { height: 100%; }
body {
background: radial-gradient(ellipse at top, var(--bg-2), var(--bg));
color: var(--text);
font-family: 'Courier New', monospace;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
overflow-x: auto;
}
.machine {
background: linear-gradient(180deg, var(--panel), #0d0d20);
border: 1px solid var(--border);
border-radius: 16px;
padding: 30px;
box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
max-width: 1100px;
width: 100%;
}
.header {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 24px;
border-bottom: 1px solid var(--border);
padding-bottom: 16px;
}
.title {
font-size: 28px;
font-weight: bold;
letter-spacing: 4px;
color: var(--accent);
text-shadow: 0 0 20px rgba(0,255,170,0.5);
}
.subtitle {
color: var(--muted);
font-size: 12px;
letter-spacing: 2px;
}
.controls {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 24px;
padding: 16px;
background: rgba(0,0,0,0.3);
border-radius: 10px;
}
button {
background: var(--bg-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 20px;
font-family: inherit;
font-size: 13px;
font-weight: bold;
letter-spacing: 2px;
cursor: pointer;
transition: all 0.15s;
}
button:hover {
border-color: var(--accent);
box-shadow: 0 0 12px rgba(0,255,170,0.3);
}
button.play-btn {
background: linear-gradient(180deg, #00ffaa, #00cc88);
color: #001a14;
border-color: #00ffaa;
min-width: 100px;
box-shadow: 0 0 20px rgba(0,255,170,0.3);
}
button.play-btn.playing {
background: linear-gradient(180deg, #ff5e3a, #cc4422);
color: white;
box-shadow: 0 0 20px rgba(255,94,58,0.4);
}
.bpm-control {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 240px;
}
.bpm-label {
font-size: 11px;
letter-spacing: 2px;
color: var(--muted);
}
.bpm-value {
color: var(--accent);
font-size: 22px;
font-weight: bold;
min-width: 50px;
text-align: right;
text-shadow: 0 0 8px rgba(0,255,170,0.5);
}
input[type="range"] {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 4px;
background: var(--bg-2);
border-radius: 2px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: var(--accent);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 8px rgba(0,255,170,0.5);
}
input[type="range"]::-moz-range-thumb {
width: 16px;
height: 16px;
background: var(--accent);
border-radius: 50%;
cursor: pointer;
border: none;
box-shadow: 0 0 8px rgba(0,255,170,0.5);
}
.grid-container {
background: rgba(0,0,0,0.4);
padding: 20px;
border-radius: 12px;
}
.grid {
display: grid;
gap: 8px;
}
.row {
display: grid;
grid-template-columns: 100px repeat(16, 1fr);
gap: 6px;
align-items: center;
}
.row-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
letter-spacing: 2px;
color: var(--muted);
text-transform: uppercase;
}
.row-label .dot {
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: 0 0 8px currentColor;
}
.row.kick .row-label { color: var(--kick); }
.row.kick .dot { background: var(--kick); }
.row.snare .row-label { color: var(--snare); }
.row.snare .dot { background: var(--snare); }
.row.hihat .row-label { color: var(--hihat); }
.row.hihat .dot { background: var(--hihat); }
.row.clap .row-label { color: var(--clap); }
.row.clap .dot { background: var(--clap); }
.step {
aspect-ratio: 1;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
transition: all 0.1s;
position: relative;
}
.step:hover {
border-color: rgba(255,255,255,0.3);
transform: scale(1.05);
}
.step.beat-start {
border-left: 2px solid var(--border);
margin-left: 2px;
}
.step.active.kick { background: var(--kick); border-color: var(--kick); box-shadow: 0 0 12px var(--kick); }
.step.active.snare { background: var(--snare); border-color: var(--snare); box-shadow: 0 0 12px var(--snare); }
.step.active.hihat { background: var(--hihat); border-color: var(--hihat); box-shadow: 0 0 12px var(--hihat); }
.step.active.clap { background: var(--clap); border-color: var(--clap); box-shadow: 0 0 12px var(--clap); }
.step.playhead::after {
content: '';
position: absolute;
inset: -3px;
border: 2px solid var(--accent);
border-radius: 8px;
pointer-events: none;
animation: pulse 0.15s;
}
@keyframes pulse {
from { opacity: 1; transform: scale(1.1); }
to { opacity: 0.6; transform: scale(1); }
}
.step-numbers {
display: grid;
grid-template-columns: 100px repeat(16, 1fr);
gap: 6px;
margin-top: 8px;
font-size: 10px;
color: var(--muted);
text-align: center;
}
.step-numbers > div:first-child { /* empty for label space */ }
.footer {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border);
color: var(--muted);
font-size: 11px;
letter-spacing: 1px;
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="machine">
<div class="header">
<div class="title">STEP-16</div>
<div class="subtitle">// WEB AUDIO DRUM MACHINE</div>
</div>
<div class="controls">
<button id="playBtn" class="play-btn">▶ PLAY</button>
<div class="bpm-control">
<span class="bpm-label">BPM</span>
<input type="range" id="bpm" min="60" max="200" value="120">
<span class="bpm-value" id="bpmValue">120</span>
</div>
<button id="clearBtn">CLEAR</button>
<button id="randomBtn">RANDOM</button>
</div>
<div class="grid-container">
<div class="grid" id="grid">
<!-- Rows generated by JS -->
</div>
<div class="step-numbers" id="stepNumbers"></div>
</div>
<div class="footer">
<span>CLICK CELLS TO PROGRAM</span>
<span id="status">STOPPED</span>
</div>
</div>
<script>
// ... all the JS
</script>
</body>
</html>
```
Let me think about what "RANDOM" should generate. Maybe:
- Kick on 1, 3, 5, 7, 9, 11, 13, 15 (or random)
- Snare on 5, 13 (backbeat) plus random
- Hi-hat on every step or every other
- Clap on certain beats
Let me just fill with random 30-50% probability for each cell. That's the simplest.
Now the JS:
```javascript
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const masterGain = audioCtx.createGain();
masterGain.gain.value = 0.6;
masterGain.connect(audioCtx.destination);
const VOICES = ['kick', 'snare', 'hihat', 'clap'];
const STEPS = 16;
// 2D pattern: pattern[voice][step] = boolean
const pattern = VOICES.map(() => new Array(STEPS).fill(false));
let isPlaying = false;
let bpm = 120;
let currentStep = -1;
let nextNoteTime = 0;
let timerID = null;
let scheduledSteps = [];
// === SYNTHESIS ===
function playKick(time) {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.type = 'sine';
osc.frequency.setValueAtTime(150, time);
osc.frequency.exponentialRampToValueAtTime(0.01, time + 0.5);
gain.gain.setValueAtTime(1.2, time);
gain.gain.exponentialRampToValueAtTime(0.001, time + 0.5);
osc.connect(gain).connect(masterGain);
osc.start(time);
osc.stop(time + 0.5);
}
function playSnare(time) {
// Noise component
const noiseBuffer = createNoiseBuffer(0.2);
const noise = audioCtx.createBufferSource();
noise.buffer = noiseBuffer;
const noiseFilter = audioCtx.createBiquadFilter();
noiseFilter.type = 'highpass';
noiseFilter.frequency.value = 1500;
const noiseGain = audioCtx.createGain();
noiseGain.gain.setValueAtTime(0.7, time);
noiseGain.gain.exponentialRampToValueAtTime(0.001, time + 0.18);
noise.connect(noiseFilter).connect(noiseGain).connect(masterGain);
noise.start(time);
noise.stop(time + 0.2);
// Tonal component
const osc = audioCtx.createOscillator();
osc.type = 'triangle';
osc.frequency.setValueAtTime(220, time);
osc.frequency.exponentialRampToValueAtTime(110, time + 0.05);
const oscGain = audioCtx.createGain();
oscGain.gain.setValueAtTime(0.4, time);
oscGain.gain.exponentialRampToValueAtTime(0.001, time + 0.08);
osc.connect(oscGain).connect(masterGain);
osc.start(time);
osc.stop(time + 0.1);
}
function playHihat(time) {
const buffer = createNoiseBuffer(0.08);
const noise = audioCtx.createBufferSource();
noise.buffer = buffer;
const filter = audioCtx.createBiquadFilter();
filter.type = 'highpass';
filter.frequency.value = 7000;
const gain = audioCtx.createGain();
gain.gain.setValueAtTime(0.35, time);
gain.gain.exponentialRampToValueAtTime(0.001, time + 0.05);
noise.connect(filter).connect(gain).connect(masterGain);
noise.start(time);
}
function playClap(time) {
// 3 short bursts for the characteristic clap sound
for (let i = 0; i < 3; i++) {
const t = time + i * 0.012;
const buffer = createNoiseBuffer(0.05);
const noise = audioCtx.createBufferSource();
noise.buffer = buffer;
const filter = audioCtx.createBiquadFilter();
filter.type = 'bandpass';
filter.frequency.value = 1300;
filter.Q.value = 1.5;
const gain = audioCtx.createGain();
const amp = 0.6 / (i + 1);
gain.gain.setValueAtTime(amp, t);
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
noise.connect(filter).connect(gain).connect(masterGain);
noise.start(t);
}
// Add a tail
const tailBuffer = createNoiseBuffer(0.1);
const tailNoise = audioCtx.createBufferSource();
tailNoise.buffer = tailBuffer;
const tailFilter = audioCtx.createBiquadFilter();
tailFilter.type = 'bandpass';
tailFilter.frequency.value = 1300;
tailFilter.Q.value = 1;
const tailGain = audioCtx.createGain();
tailGain.gain.setValueAtTime(0.3, time + 0.04);
tailGain.gain.exponentialRampToValueAtTime(0.001, time + 0.12);
tailNoise.connect(tailFilter).connect(tailGain).connect(masterGain);
tailNoise.start(time + 0.04);
}
function createNoiseBuffer(duration) {
const bufferSize = audioCtx.sampleRate * duration;
const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
const data = buffer.getChannelData(0);
for (let i = 0; i < bufferSize; i++) {
data[i] = Math.random() * 2 - 1;
}
return buffer;
}
const VOICE_FN = {
kick: playKick,
snare: playSnare,
hihat: playHihat,
clap: playClap
};
// === SCHEDULER ===
function scheduler() {
while (nextNoteTime < audioCtx.currentTime + 0.1) {
VOICES.forEach((voice, vIdx) => {
if (pattern[vIdx][currentStep]) {
VOICE_FN[voice](nextNoteTime);
}
});
scheduledSteps.push({step: currentStep, time: nextNoteTime});
if (scheduledSteps.length > 32) scheduledSteps.shift();
nextStep();
}
if (isPlaying) timerID = setTimeout(scheduler, 25);
}
function nextStep() {
const stepDuration = 60 / bpm / 4; // 16th note
nextNoteTime += stepDuration;
currentStep = (currentStep + 1) % STEPS;
}
function togglePlay() {
if (isPlaying) {
stop();
} else {
play();
}
}
function play() {
isPlaying = true;
audioCtx.resume();
currentStep = 0;
nextNoteTime = audioCtx.currentTime + 0.05;
scheduler();
requestAnimationFrame(drawPlayhead);
updateUI();
}
function stop() {
isPlaying = false;
clearTimeout(timerID);
scheduledSteps = [];
updateUI();
document.querySelectorAll('.step').forEach(el => el.classList.remove('playhead'));
}
function drawPlayhead() {
if (!isPlaying) return;
const now = audioCtx.currentTime;
let active = -1;
for (const s of scheduledSteps) {
if (s.time <= now + 0.001) active = s.step;
}
document.querySelectorAll('.step').forEach(el => {
const isActive = parseInt(el.dataset.step) === active;
el.classList.toggle('playhead', isActive);
});
requestAnimationFrame(drawPlayhead);
}
function updateUI() {
const btn = document.getElementById('playBtn');
btn.textContent = isPlaying ? '■ STOP' : '▶ PLAY';
btn.classList.toggle('playing', isPlaying);
document.getElementById('status').textContent = isPlaying ? 'PLAYING' : 'STOPPED';
}
// === UI BUILDING ===
function buildGrid() {
const grid = document.getElementById('grid');
grid.innerHTML = '';
VOICES.forEach((voice, vIdx) => {
const row = document.createElement('div');
row.className = `row ${voice}`;
const label = document.createElement('div');
label.className = 'row-label';
label.innerHTML = `<span class="dot"></span>${voice.toUpperCase()}`;
row.appendChild(label);
for (let s = 0; s < STEPS; s++) {
const cell = document.createElement('div');
cell.className = 'step' + (s % 4 === 0 ? ' beat-start' : '');
cell.dataset.voice = vIdx;
cell.dataset.step = s;
cell.addEventListener('click', () => toggleCell(vIdx, s, cell));
row.appendChild(cell);
}
grid.appendChild(row);
});
const numbers = document.getElementById('stepNumbers');
numbers.innerHTML = '<div></div>';
for (let s = 0; s < STEPS; s++) {
const n = document.createElement('div');
n.textContent = s + 1;
numbers.appendChild(n);
}
}
function toggleCell(vIdx, step, cell) {
pattern[vIdx][step] = !pattern[vIdx][step];
cell.classList.toggle('active', pattern[vIdx][step]);
cell.classList.toggle(VOICES[vIdx], pattern[vIdx][step]);
}
function clearPattern() {
VOICES.forEach((_, vIdx) => {
for (let s = 0; s < STEPS; s++) pattern[vIdx][s] = false;
});
updateGrid();
}
function randomize() {
// Sensible random: each step has some probability
for (let s = 0; s < STEPS; s++) {
pattern[0][s] = Math.random() < 0.4; // kick
pattern[1][s] = Math.random() < 0.2; // snare
pattern[2][s] = Math.random() < 0.5; // hihat
pattern[3][s] = Math.random() < 0.15; // clap
}
updateGrid();
}
function updateGrid() {
document.querySelectorAll('.step').forEach(el => {
const v = parseInt(el.dataset.voice);
const s = parseInt(el.dataset.step);
const active = pattern[v][s];
el.classList.toggle('active', active);
el.classList.toggle(VOICES[v], active);
});
}
// === EVENT LISTENERS ===
document.getElementById('playBtn').addEventListener('click', togglePlay);
document.getElementById('bpm').addEventListener('input', (e) => {
bpm = parseInt(e.target.value);
document.getElementById('bpmValue').textContent = bpm;
});
document.getElementById('clearBtn').addEventListener('click', clearPattern);
document.getElementById('randomBtn').addEventListener('click', randomize);
// Init
buildGrid();
// Spacebar to play/pause
document.addEventListener('keydown', (e) => {
if (e.code === 'Space' && e.target.tagName !== 'INPUT') {
e.preventDefault();
togglePlay();
}
});
```
Hmm, one issue with `toggleCell`: I'm adding the voice class only when active. But I want the step to potentially have the voice class for the right color when active. Let me check.
When pattern[0][5] is true (kick on step 5), the cell should:
- Have class "active" → makes it use the kick color (because of the rule .step.active.kick { background: var(--kick) })
But wait, the rule order matters:
```css
.step.active.kick { background: var(--kick); ... }
.step.active.snare { background: var(--snare); ... }
```
If a cell has classes "step beat-start active kick", the rules `.step.active.kick` will match.
But if a cell has only "step beat-start", it shouldn't match any of these.
When I toggle, I add "active" and "kick" - both classes. When inactive, I remove both. That should work.
Wait, in my toggleCell, I do:
```js
cell.classList.toggle('active', pattern[vIdx][step]);
cell.classList.toggle(VOICES[vIdx], pattern[vIdx][step]);
```
So when active, cell gets classes "step beat-start active kick". When inactive, it gets "step beat-start".
OK that's fine.
Actually, one issue: I want the step to always have the voice class so the active color is right, but it's redundant. The way I have it works.
Let me also consider: what if I want to preview a sound by clicking the row label? That would be nice. Let me add that.
```js
label.addEventListener('click', () => {
audioCtx.resume();
VOICE_FN[voice](audioCtx.currentTime);
});
```
Hmm but the label has the row structure already. Let me add a click handler. Actually let me make this part of the experience - clicking the row label plays a preview. Or make it a small play icon next to the label.
Actually, let me just add it as a click handler on the label, and cursor pointer on hover.
Let me also think about touch support - the events should work on mobile since click events work on touch.
OK let me finalize and write the code.
Wait, I should also make the grid responsive. On mobile, 16 columns might be too narrow. Let me use min-width for the grid container so it can scroll horizontally if needed.
Actually let me use a min-width for the steps to keep them visible. Or use a flex layout that wraps. For now, let me set min-width on the row to ~700px so it's usable on tablets, and the body already has overflow-x: auto.
Let me adjust:
```css
.row {
min-width: 600px;
}
```
Or better, use a CSS grid with min-width on each step:
```css
.step {
min-width: 36px;
min-height: 36px;
}
```
Hmm, the aspect-ratio might fight this. Let me just give them fixed dimensions.
Actually let me re-think the layout. On desktop:
- 16 columns spread evenly across available space
- On mobile, each step is small but tappable
Let me set min-width on steps so they don't get too small:
```css
.step {
min-width: 32px;
aspect-ratio: 1;
}
```
And make the grid scroll horizontally on small screens.
Let me put min-width on the .grid-container too so it doesn't squish.
OK let me also add some additional polish:
- A small play icon in each row label that previews the sound
- Maybe a "swing" slider for groove
- Master volume
Let me decide what's essential and not over-scope:
- ✓ 16-step grid (4 voices)
- ✓ Play/Stop
- ✓ BPM
- ✓ Click cells to toggle
- ✓ Visual playhead
- ✓ Web Audio synthesis for all 4 sounds
- ✓ Clear, Randomize
- ✓ Spacebar play/pause
- ✓ Per-row preview on click
- ✓ Beat group separators
Skipping:
- Swing (extra complexity, not required)
- Master volume (already at reasonable default)
- Save/load patterns
Let me also add a subtle visual cue when a sound is played in real-time - not just the playhead, but a brief flash on the cells too. Actually, that's already handled because the active cells + playhead = the played cell glows brightly.
OK let me finalize and write this out.
One thing - the playhead should be visible even on inactive cells to show which step is current. So it should be a separate visual element. Let me use a row of step indicators or just the outline on the cell.
Actually, my current approach puts a `::after` outline on every cell in the active step column. That's good. But for inactive cells, the outline would still appear because they're at the active step. Let me verify: the playhead CSS rule `.step.playhead::after { content: ''; ... border: 2px solid var(--accent); }` - this adds an outline. The active cells in the playhead step will have a glowing background AND the outline. That's fine, looks good.
OK final code coming up.
One more thing - I should add `osc.stop(time + duration)` for snare tonal to avoid leaked oscillators. Let me make sure all oscillators have proper stop times.
For the kick:
```js
osc.start(time);
osc.stop(time + 0.5);
```
✓
For snare tonal:
```js
osc.start(time);
osc.stop(time + 0.1);
```
✓
Hihat doesn't use oscillators, just buffer source. Need to add `.stop()` though, or it will end naturally:
```js
noise.start(time);
```
Buffer sources auto-stop after the buffer length. But adding explicit stop is safer. Actually buffer sources don't auto-stop in older browsers. Let me add stop calls.
For hihat:
```js
noise.start(time);
noise.stop(time + 0.08);
```
For clap bursts:
```js
noise.start(t);
noise.stop(t + 0.05);
```
OK let me also think about Web Audio context state. On user gesture, we resume it. My play() function does audioCtx.resume(). But what about when the user first clicks the play button? That counts as a user gesture, so audioCtx.state should be "running" after resume(). Good.
Actually, the AudioContext is created in suspended state by default. We need to resume() on first user interaction. The play button click is the perfect place.
Let me also handle the case where the user has the page open for a while - the AudioContext might auto-suspend. Calling resume() on each play() should handle that.
OK let me write the final code.
Actually, I realize I should double-check the Web Audio noise buffer usage. To avoid creating a new buffer for every sound (which is wasteful), I could create buffers once. But the overhead of creating small buffers is fine in practice. Let me cache them though for performance:
```js
const noiseCache = {};
function getNoiseBuffer(duration) {
if (noiseCache[duration]) return noiseCache[duration];
const bufferSize = audioCtx.sampleRate * duration;
const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
const data = buffer.getChannelData(0);
for (let i = 0; i < bufferSize; i++) {
data[i] = Math.random() * 2 - 1;
}
noiseCache[duration] = buffer;
return buffer;
}
```
This is better for performance and avoids audio artifacts from re-creating noise each time.
Hmm but each noise burst should ideally have different noise characteristics. Caching by duration means each step uses the same noise. Let me cache by step actually... no wait, the same noise buffer used multiple times doesn't really matter since it's noise. The randomness is in the buffer itself. Different invocations of the same buffer will play the same noise pattern, but it'll be at different times so you won't notice.
Actually, I want each hit to sound slightly different for realism. Let me regenerate buffers but cache by a per-call counter. Or just keep regenerating - the performance overhead is small enough.
You know what, let me just regenerate. The performance hit of creating a small buffer is minimal. Modern browsers handle this fine.
OK, final code:
Actually, let me reconsider one thing. The kick's exponential frequency ramp to 0.01 might cause issues. Let me use a higher floor like 30Hz:
```js
osc.frequency.exponentialRampToValueAtTime(30, time + 0.5);
```
Actually exponentialRampToValueAtTime with target 0.01 works fine, but 30 sounds more like a real kick. Let me use 40Hz.
Actually, a real kick has the oscillator go from ~150Hz down to ~40-60Hz, not all the way to 0. Let me adjust:
```js
osc.frequency.setValueAtTime(150, time);
osc.frequency.exponentialRampToValueAtTime(40, time + 0.5);
```
For snare tonal:
```js
osc.frequency.setValueAtTime(220, time);
osc.frequency.exponentialRampToValueAtTime(180, time + 0.05);
```
OK final implementation time. Let me write it all out.
Actually let me also think about the visual when notes are played - some drum machines flash the cell when it's hit. The playhead already does this for the active step. But the cell being highlighted (background glow) vs step indicator (outline) - that's a subtle distinction.
The active cell has a colored background (the voice color).
The playhead adds a green outline.
So at the moment of impact:
- Active cell: glowing with voice color, has green outline (playhead)
- Inactive cell: dark background, has green outline (playhead)
This visually distinguishes "is this step hit?" from "is this step playing?"
Let me write the final HTML now. I'll make sure everything is robust.
Hmm, I should also handle the case where the user changes BPM mid-playback. The scheduler uses `bpm` at scheduling time, but since we schedule ahead 0.1s, there could be a slight inconsistency. For simplicity, the next step duration is computed in `nextStep()` using the current `bpm` value. That works because changing BPM changes the next step's duration, and all subsequent steps follow. Good.
Actually wait, let me trace through:
1. BPM changes from 120 to 60
2. Scheduler is in middle of scheduling steps at 120 BPM
3. Next call to nextStep() uses bpm=60, so step duration doubles
4. All subsequent steps are at 60 BPM ✓
Good.
One more thought - the playhead indicator should be clearly visible. Maybe make it brighter and have a small animation. The current pulse animation is good.
OK writing the final code now.
Actually, on reflection, let me also add a small visual to indicate when each voice is being triggered, beyond just the playhead. I could have the row label pulse when its sound is triggered. Let me do that:
In scheduler, after triggering a sound, I add a class to the row label that pulses briefly:
```js
if (pattern[vIdx][currentStep]) {
VOICE_FN[voice](nextNoteTime);
// Schedule visual flash
setTimeout(() => {
const label = document.querySelector(`.row.${voice} .row-label`);
if (label) {
label.classList.add('flash');
setTimeout(() => label.classList.remove('flash'), 100);
}
}, Math.max(0, (nextNoteTime - audioCtx.currentTime) * 1000));
}
```
Hmm but this is approximate. Let me think of a better way.
Actually, the simplest is to track in the rAF loop which voices are currently sounding. But that's tricky because we don't know exactly when a sound stops.
Alternative: schedule a CSS animation start time using `setTimeout` based on `nextNoteTime - audioCtx.currentTime`. Let me use `setTimeout` with that delay.
```js
const delayMs = (nextNoteTime - audioCtx.currentTime) * 1000;
setTimeout(() => flashVoice(voice), Math.max(0, delayMs));
```
Actually for simplicity, let me skip the per-voice flash. The playhead is enough indication. Plus the active cell's color matches the voice, so you see what's playing.
OK, I'm overthinking this. Let me just write the final code.
Here's the structure I'll write:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STEP-16 · Drum Machine</title>
<style>
/* All the CSS */
</style>
</head>
<body>
<div class="machine">
<!-- Header -->
<!-- Controls -->
<!-- Grid -->
<!-- Footer -->
</div>
<script>
// Audio context
// Voice functions
// Scheduler
// UI
// Event handlers
</script>
</body>
</html>
```
Let me write it now.
Actually let me think about one more thing - what if I add small play buttons next to each row label to preview the sound? That would be a nice touch. Let me add that.
```html
<div class="row-label" data-voice="kick">
<button class="preview-btn">▶</button>
<span class="dot"></span>KICK
</div>
```
The preview button is small, sits at the start of the label. Clicking it plays the sound.
Actually, let me just make the entire label clickable for preview. Cursor: pointer. Hover effect. Click plays the sound.
```js
label.addEventListener('click', () => {
audioCtx.resume();
VOICE_FN[voice](audioCtx.currentTime);
});
```
But then clicking the label doesn't also trigger the row's first cell or anything. Labels are separate from cells, so this is fine.
OK final code time. Let me write it.
Let me finalize the look-and-feel:
For the step cells, when they're active:
- Filled with voice color
- Subtle box-shadow glow
- Slight scale up on hover
When the playhead is on a step (regardless of active):
- Bright accent-colored outline (greenish)
- Maybe a subtle pulse animation
For inactive + non-playhead:
- Dark background
- Subtle border
For active + playhead:
- Voice color fill
- Bright accent outline
- Strong glow
Let me also add some sound preview by clicking the row label - this is intuitive.
OK code time:
```css
/* Color scheme */
:root {
--bg: #08081a;
--panel: #11112a;
--bg-2: #1a1a35;
--border: #2a2a55;
--text: #f0f0ff;
--muted: #7777aa;
--accent: #00ffaa;
--kick: #ff5e3a;
--snare: #4dd0e1;
--hihat: #ffd54f;
--clap: #ec407a;
}
```
Let me also add a subtle texture/grid pattern to the background for that "studio" feel. Maybe just a subtle radial gradient.
OK let me write the full HTML file now.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STEP-16 · Drum Machine</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #06061a;
--bg-2: #0e0e25;
--panel: #15152e;
--border: #2a2a55;
--border-2: #3a3a6a;
--text: #f0f0ff;
--muted: #7777aa;
--accent: #00ffaa;
--kick: #ff5e3a;
--snare: #4dd0e1;
--hihat: #ffd54f;
--clap: #ec407a;
}
html, body { height: 100%; }
body {
background:
radial-gradient(ellipse at 20% 0%, rgba(0,255,170,0.05), transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(236,64,122,0.05), transparent 50%),
var(--bg);
color: var(--text);
font-family: 'Courier New', 'Courier', monospace;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
min-height: 100vh;
overflow-x: auto;
}
.machine {
background: linear-gradient(180deg, var(--panel) 0%, #0a0a20 100%);
border: 1px solid var(--border);
border-radius: 18px;
padding: 28px;
box-shadow:
0 30px 80px rgba(0,0,0,0.7),
inset 0 1px 0 rgba(255,255,255,0.05),
0 0 0 1px rgba(255,255,255,0.02);
max-width: 1100px;
width: 100%;
}
.header {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 22px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.title {
font-size: 28px;
font-weight: bold;
letter-spacing: 6px;
color: var(--accent);
text-shadow: 0 0 16px rgba(0,255,170,0.6);
}
.subtitle {
color: var(--muted);
font-size: 11px;
letter-spacing: 3px;
}
.led {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--muted);
margin-right: 8px;
vertical-align: middle;
transition: all 0.2s;
}
.led.on {
background: var(--accent);
box-shadow: 0 0 8px var(--accent);
}
.controls {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 22px;
padding: 14px 16px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--border);
border-radius: 10px;
}
button {
background: var(--bg-2);
color: var(--text);
border: 1px solid var(--border-2);
border-radius: 6px;
padding: 10px 16px;
font-family: inherit;
font-size: 11px;
font-weight: bold;
letter-spacing: 2px;
cursor: pointer;
transition: all 0.15s;
text-transform: uppercase;
}
button:hover {
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 0 10px rgba(0,255,170,0.2);
}
button:active { transform: translateY(1px); }
.play-btn {
background: linear-gradient(180deg, #00ffaa, #00cc88);
color: #001a14;
border-color: #00ffaa;
min-width: 110px;
box-shadow: 0 0 16px rgba(0,255,170,0.3);
font-size: 12px;
}
.play-btn:hover {
color: #001a14;
box-shadow: 0 0 24px rgba(0,255,170,0.5);
border-color: var(--accent);
}
.play-btn.playing {
background: linear-gradient(180deg, #ff5e3a, #cc4422);
border-color: var(--kick);
box-shadow: 0 0 20px rgba(255,94,58,0.5);
color: white;
}
.play-btn.playing:hover {
color: white;
border-color: var(--kick);
}
.bpm-control {
display: flex;
align-items: center;
gap: 14px;
flex: 1;
min-width: 280px;
}
.bpm-label {
font-size: 10px;
letter-spacing: 2px;
color: var(--muted);
text-transform: uppercase;
}
.bpm-value {
color: var(--accent);
font-size: 24px;
font-weight: bold;
min-width: 60px;
text-align: right;
text-shadow: 0 0 8px rgba(0,255,170,0.5);
font-variant-numeric: tabular-nums;
}
.bpm-buttons {
display: flex;
gap: 4px;
}
input[type="range"] {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 4px;
background: linear-gradient(90deg, var(--accent), var(--bg-2));
border-radius: 2px;
outline: none;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: var(--accent);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 10px rgba(0,255,170,0.6);
border: 2px solid var(--bg);
}
input[type="range"]::-moz-range-thumb {
width: 14px;
height: 14px;
background: var(--accent);
border-radius: 50%;
cursor: pointer;
border: 2px solid var(--bg);
box-shadow: 0 0 10px rgba(0,255,170,0.6);
}
.grid-container {
background: rgba(0,0,0,0.4);
border: 1px solid var(--border);
padding: 22px;
border-radius: 12px;
overflow-x: auto;
}
.grid {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 700px;
}
.row {
display: grid;
grid-template-columns: 110px repeat(16, 1fr);
gap: 5px;
align-items: center;
}
.row-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
padding: 6px 8px;
border-radius: 4px;
transition: background 0.15s;
user-select: none;
}
.row-label:hover {
background: rgba(255,255,255,0.05);
}
.row-label .dot {
width: 8px;
height: 8px;
border-radius: 50%;
box-shadow: 0 0 6px currentColor;
}
.row-label .preview {
font-size: 9px;
opacity: 0.5;
}
.row-label:hover .preview { opacity: 1; }
.row.kick .row-label { color: var(--kick); }
.row.kick .dot { background: var(--kick); }
.row.snare .row-label { color: var(--snare); }
.row.snare .dot { background: var(--snare); }
.row.hihat .row-label { color: var(--hihat); }
.row.hihat .dot { background: var(--hihat); }
.row.clap .row-label { color: var(--clap); }
.row.clap .dot { background: var(--clap); }
.step {
aspect-ratio: 1;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 5px;
cursor: pointer;
transition: all 0.1s;
position: relative;
min-height: 32px;
}
.step:hover {
border-color: var(--border-2);
transform: scale(1.05);
z-index: 1;
}
.step.beat-start::before {
content: '';
position: absolute;
left: -3px;
top: 10%;
height: 80%;
width: 1px;
background: var(--border-2);
}
.step.active.kick {
background: var(--kick);
border-color: var(--kick);
box-shadow: 0 0 12px var(--kick), inset 0 0 8px rgba(255,255,255,0.2);
}
.step.active.snare {
background: var(--snare);
border-color: var(--snare);
box-shadow: 0 0 12px var(--snare), inset 0 0 8px rgba(255,255,255,0.2);
}
.step.active.hihat {
background: var(--hihat);
border-color: var(--hihat);
box-shadow: 0 0 12px var(--hihat), inset 0 0 8px rgba(255,255,255,0.2);
color: #1a1a00;
}
.step.active.clap {
background: var(--clap);
border-color: var(--clap);
box-shadow: 0 0 12px var(--clap), inset 0 0 8px rgba(255,255,255,0.2);
}
.step.playhead::after {
content: '';
position: absolute;
inset: -3px;
border: 2px solid var(--accent);
border-radius: 7px;
pointer-events: none;
box-shadow: 0 0 10px var(--accent);
animation: ph 0.2s ease-out;
}
@keyframes ph {
from { transform: scale(1.15); opacity: 1; }
to { transform: scale(1); opacity: 1; }
}
.step-numbers {
display: grid;
grid-template-columns: 110px repeat(16, 1fr);
gap: 5px;
margin-top: 10px;
font-size: 10px;
color: var(--muted);
text-align: center;
}
.step-numbers > div.beat-num { color: var(--text); }
.footer {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--border);
color: var(--muted);
font-size: 10px;
letter-spacing: 1.5px;
display: flex;
justify-content: space-between;
align-items: center;
}
#status {
color: var(--accent);
text-shadow: 0 0 6px rgba(0,255,170,0.4);
}
#status.playing { color: var(--kick); text-shadow: 0 0 6px rgba(255,94,58,0.4); }
.hint kbd {
background: var(--bg-2);
border: 1px solid var(--border-2);
padding: 1px 6px;
border-radius: 3px;
font-family: inherit;
font-size: 10px;
color: var(--text);
margin: 0 2px;
}
@media (max-width: 700px) {
.title { font-size: 22px; letter-spacing: 4px; }
.machine { padding: 18px; }
.row { grid-template-columns: 80px repeat(16, 1fr); gap: 3px; }
.row-label { font-size: 10px; letter-spacing: 1px; }
.step-numbers { grid-template-columns: 80px repeat(16, 1fr); gap: 3px; }
.grid { min-width: 600px; }
}
</style>
</head>
<body>
<div class="machine">
<div class="header">
<div class="title">STEP-16</div>
<div class="subtitle">// WEB AUDIO DRUM MACHINE</div>
<div style="margin-left:auto"><span class="led" id="led"></span><span id="status">STOPPED</span></div>
</div>
<div class="controls">
<button id="playBtn" class="play-btn">▶ PLAY</button>
<div class="bpm-control">
<span class="bpm-label">BPM</span>
<input type="range" id="bpm" min="60" max="200" value="120">
<span class="bpm-value" id="bpmValue">120</span>
</div>
<button id="clearBtn">CLEAR</button>
<button id="randomBtn">RANDOM</button>
</div>
<div class="grid-container">
<div class="grid" id="grid"></div>
<div class="step-numbers" id="stepNumbers"></div>
</div>
<div class="footer">
<div class="hint">
<kbd>CLICK</kbd> cells to toggle · <kbd>SPACE</kbd> play/stop · <kbd>ROW LABEL</kbd> to preview
</div>
</div>
</div>
<script>
// ============ STATE ============
const VOICES = ['kick', 'snare', 'hihat', 'clap'];
const STEPS = 16;
const VOICE_FN = {};
const pattern = VOICES.map(() => new Array(STEPS).fill(false));
let isPlaying = false;
let bpm = 120;
let currentStep = 0;
let nextNoteTime = 0;
let schedulerTimer = null;
const scheduledSteps = [];
// ============ AUDIO CONTEXT ============
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const masterGain = audioCtx.createGain();
masterGain.gain.value = 0.55;
// Add a soft compressor for warmth
const compressor = audioCtx.createDynamicsCompressor();
compressor.threshold.value = -12;
compressor.ratio.value = 4;
compressor.attack.value = 0.003;
compressor.release.value = 0.1;
masterGain.connect(compressor).connect(audioCtx.destination);
// ============ NOISE BUFFER HELPER ============
function makeNoise(duration) {
const len = Math.floor(audioCtx.sampleRate * duration);
const buf = audioCtx.createBuffer(1, len, audioCtx.sampleRate);
const data = buf.getChannelData(0);
for (let i = 0; i < len; i++) data[i] = Math.random() * 2 - 1;
return buf;
}
// ============ VOICE SYNTHESIS ============
function playKick(time) {
// Body: sine with pitch envelope
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.type = 'sine';
osc.frequency.setValueAtTime(160, time);
osc.frequency.exponentialRampToValueAtTime(45, time + 0.08);
osc.frequency.exponentialRampToValueAtTime(35, time + 0.4);
gain.gain.setValueAtTime(0.0, time);
gain.gain.linearRampToValueAtTime(1.3, time + 0.002);
gain.gain.exponentialRampToValueAtTime(0.001, time + 0.5);
osc.connect(gain).connect(masterGain);
osc.start(time);
osc.stop(time + 0.55);
// Click: short noise burst
const click = audioCtx.createBufferSource();
click.buffer = makeNoise(0.01);
const clickGain = audioCtx.createGain();
clickGain.gain.setValueAtTime(0.4, time);
clickGain.gain.exponentialRampToValueAtTime(0.001, time + 0.01);
click.connect(clickGain).connect(masterGain);
click.start(time);
}
function playSnare(time) {
// Noise component (the "snare wires")
const noise = audioCtx.createBufferSource();
noise.buffer = makeNoise(0.3);
const noiseFilter = audioCtx.createBiquadFilter();
noiseFilter.type = 'highpass';
noiseFilter.frequency.value = 1500;
const noiseFilter2 = audioCtx.createBiquadFilter();
noiseFilter2.type = 'bandpass';
noiseFilter2.frequency.value = 3500;
noiseFilter2.Q.value = 1;
const noiseGain = audioCtx.createGain();
noiseGain.gain.setValueAtTime(0.7, time);
noiseGain.gain.exponentialRampToValueAtTime(0.001, time + 0.2);
noise.connect(noiseFilter).connect(noiseFilter2).connect(noiseGain).connect(masterGain);
noise.start(time);
// Tonal component (the "body")
const osc = audioCtx.createOscillator();
osc.type = 'triangle';
osc.frequency.setValueAtTime(220, time);
osc.frequency.exponentialRampToValueAtTime(140, time + 0.05);
const oscGain = audioCtx.createGain();
oscGain.gain.setValueAtTime(0.5, time);
oscGain.gain.exponentialRampToValueAtTime(0.001, time + 0.1);
osc.connect(oscGain).connect(masterGain);
osc.start(time);
osc.stop(time + 0.1);
}
function playHihat(time) {
const noise = audioCtx.createBufferSource();
noise.buffer = makeNoise(0.1);
const filter = audioCtx.createBiquadFilter();
filter.type = 'highpass';
filter.frequency.value = 8000;
const filter2 = audioCtx.createBiquadFilter();
filter2.type = 'highpass';
filter2.frequency.value = 6000;
const gain = audioCtx.createGain();
gain.gain.setValueAtTime(0.3, time);
gain.gain.exponentialRampToValueAtTime(0.001, time + 0.05);
noise.connect(filter).connect(filter2).connect(gain).connect(masterGain);
noise.start(time);
noise.stop(time + 0.1);
}
function playClap(time) {
// Three short bursts
for (let i = 0; i < 3; i++) {
const t = time + i * 0.013;
const noise = audioCtx.createBufferSource();
noise.buffer = makeNoise(0.04);
const filter = audioCtx.createBiquadFilter();
filter.type = 'bandpass';
filter.frequency.value = 1200;
filter.Q.value = 1.5;
const gain = audioCtx.createGain();
const amp = 0.5 / (i + 1);
gain.gain.setValueAtTime(amp, t);
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
noise.connect(filter).connect(gain).connect(masterGain);
noise.start(t);
noise.stop(t + 0.05);
}
// Tail
const tail = audioCtx.createBufferSource();
tail.buffer = makeNoise(0.15);
const tailFilter = audioCtx.createBiquadFilter();
tailFilter.type = 'bandpass';
tailFilter.frequency.value = 1100;
tailFilter.Q.value = 0.8;
const tailGain = audioCtx.createGain();
tailGain.gain.setValueAtTime(0.0, time);
tailGain.gain.linearRampToValueAtTime(0.4, time + 0.04);
tailGain.gain.exponentialRampToValueAtTime(0.001, time + 0.15);
tail.connect(tailFilter).connect(tailGain).connect(masterGain);
tail.start(time + 0.04);
tail.stop(time + 0.16);
}
VOICE_FN.kick = playKick;
VOICE_FN.snare = playSnare;
VOICE_FN.hihat = playHihat;
VOICE_FN.clap = playClap;
// ============ SCHEDULER ============
function scheduler() {
while (nextNoteTime < audioCtx.currentTime + 0.1) {
VOICES.forEach((voice, vIdx) => {
if (pattern[vIdx][currentStep]) {
VOICE_FN[voice](nextNoteTime);
}
});
scheduledSteps.push({step: currentStep, time: nextNoteTime});
if (scheduledSteps.length > 32) scheduledSteps.shift();
nextStep();
}
if (isPlaying) schedulerTimer = setTimeout(scheduler, 25);
}
function nextStep() {
const stepDur = 60 / bpm / 4;
nextNoteTime += stepDur;
currentStep = (currentStep + 1) % STEPS;
}
function togglePlay() {
if (isPlaying) stop();
else start();
}
function start() {
audioCtx.resume();
isPlaying = true;
currentStep = 0;
nextNoteTime = audioCtx.currentTime + 0.06;
scheduledSteps.length = 0;
scheduler();
requestAnimationFrame(drawPlayhead);
updateUI();
}
function stop() {
isPlaying = false;
clearTimeout(schedulerTimer);
scheduledSteps.length = 0;
document.querySelectorAll('.step').forEach(el => el.classList.remove('playhead'));
updateUI();
}
function drawPlayhead() {
if (!isPlaying) return;
const now = audioCtx.currentTime;
let active = -1;
for (const s of scheduledSteps) {
if (s.time <= now + 0.001) active = s.step;
}
document.querySelectorAll('.step').forEach(el => {
el.classList.toggle('playhead', parseInt(el.dataset.step) === active);
});
requestAnimationFrame(drawPlayhead);
}
function updateUI() {
const btn = document.getElementById('playBtn');
btn.textContent = isPlaying ? '■ STOP' : '▶ PLAY';
btn.classList.toggle('playing', isPlaying);
const status = document.getElementById('status');
status.textContent = isPlaying ? 'PLAYING' : 'STOPPED';
status.classList.toggle('playing', isPlaying);
document.getElementById('led').classList.toggle('on', isPlaying);
}
// ============ UI ============
function buildGrid() {
const grid = document.getElementById('grid');
VOICES.forEach((voice, vIdx) => {
const row = document.createElement('div');
row.className = `row ${voice}`;
const label = document.createElement('div');
label.className = 'row-label';
label.innerHTML = `<span class="dot"></span><span>${voice.toUpperCase()}</span><span class="preview">▶</span>`;
label.title = `Click to preview ${voice}`;
label.addEventListener('click', () => {
audioCtx.resume();
VOICE_FN[voice](audioCtx.currentTime);
});
row.appendChild(label);
for (let s = 0; s < STEPS; s++) {
const cell = document.createElement('div');
cell.className = 'step' + (s % 4 === 0 ? ' beat-start' : '');
cell.dataset.voice = vIdx;
cell.dataset.step = s;
cell.addEventListener('click', () => toggleCell(vIdx, s, cell));
row.appendChild(cell);
}
grid.appendChild(row);
});
const nums = document.getElementById('stepNumbers');
nums.innerHTML = '<div></div>';
for (let s = 0; s < STEPS; s++) {
const n = document.createElement('div');
n.textContent = s + 1;
if ((s % 4) === 0) n.classList.add('beat-num');
nums.appendChild(n);
}
}
function toggleCell(vIdx, step, cell) {
pattern[vIdx][step] = !pattern[vIdx][step];
const active = pattern[vIdx][step];
cell.classList.toggle('active', active);
cell.classList.toggle(VOICES[vIdx], active);
}
function clearPattern() {
VOICES.forEach((_, v) => pattern[v].fill(false));
document.querySelectorAll('.step').forEach(el => {
el.classList.remove('active', 'kick', 'snare', 'hihat', 'clap');
});
}
function randomize() {
for (let s = 0; s < STEPS; s++) {
pattern[0][s] = Math.random() < 0.4;
pattern[1][s] = Math.random() < 0.2;
pattern[2][s] = Math.random() < 0.5;
pattern[3][s] = Math.random() < 0.15;
}
refreshGrid();
}
function refreshGrid() {
document.querySelectorAll('.step').forEach(el => {
const v = parseInt(el.dataset.voice);
const s = parseInt(el.dataset.step);
const active = pattern[v][s];
el.classList.toggle('active', active);
el.classList.toggle(VOICES[v], active);
});
}
// ============ EVENTS ============
document.getElementById('playBtn').addEventListener('click', togglePlay);
document.getElementById('bpm').addEventListener('input', e => {
bpm = parseInt(e.target.value);
document.getElementById('bpmValue').textContent = bpm;
});
document.getElementById('clearBtn').addEventListener('click', clearPattern);
document.getElementById('randomBtn').addEventListener('click', randomize);
document.addEventListener('keydown', e => {
if (e.code === 'Space' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'BUTTON') {
e.preventDefault();
togglePlay();
}
});
// Init
buildGrid();
</script>
</body>
</html>
```
Wait, the keydown handler excludes BUTTON. Let me make sure spacebar doesn't trigger buttons accidentally. Actually, when a button has focus, spacebar activates it. So if the play button has focus (after click), spacebar will activate it again. That's fine behavior. Let me exclude INPUT only:
Actually, the issue is spacebar scrolling the page when no input is focused. Let me prevent default in all cases but only toggle when not in an input.
```js
document.addEventListener('keydown', e => {
if (e.code === 'Space') {
if (e.target.tagName === 'INPUT') return;
e.preventDefault();
togglePlay();
}
});
```
That's cleaner.
Now let me also handle: what if AudioContext is suspended (page loaded but user hasn't interacted)? The first interaction (play button click) will resume it. Good.
Let me also make sure the first note plays correctly. The scheduler looks ahead 0.1s, so the first note fires at `nextNoteTime = audioCtx.currentTime + 0.06`. That gives the user a brief moment after pressing play to hear the first beat. Good.
Actually wait, the issue is that `currentStep` starts at 0, but `nextStep()` increments it after scheduling. So when the scheduler runs:
- currentStep=0, schedule at nextNoteTime
- nextStep(): currentStep=1, nextNoteTime advanced
That's correct - step 0 is the first beat.
For visual playhead, `drawPlayhead` checks `scheduledSteps` for the most recent step whose time <= now. So as soon as the first step is scheduled and its time passes, the playhead moves to step 0. Good.
Hmm wait, there's a subtle bug. The playhead should highlight step 0 BEFORE the sound is heard, so the user sees the upcoming step. But that's a tiny visual detail and the user will see it within ~60ms.
Actually, let me think again. The scheduler schedules step 0 to play at nextNoteTime. So at currentTime+0.06, step 0 plays. The visual should show step 0 highlighted as "playing" during this time.
`drawPlayhead` runs in rAF (60fps). Each frame, it checks `scheduledSteps` for steps whose time has passed. If `nextNoteTime` was scheduled at currentTime+0.06, then for the next ~60ms (until currentTime catches up), step 0 won't be "active" yet because its time hasn't passed.
To fix this, let me highlight the step from a bit before its scheduled time:
```js
const lookAheadWindow = 0.05; // 50ms before
if (s.time <= now + lookAheadWindow) active = s.step;
```
Or better, track which step is currently in progress:
```js
// Step is "current" if we're within its duration window
const stepDur = 60 / bpm / 4;
let active = -1;
for (const s of scheduledSteps) {
if (s.time <= now) active = s.step;
// Also include upcoming step briefly
if (s.time <= now + stepDur * 0.1) active = s.step;
}
```
Hmm. Actually, I want the playhead to highlight a step when its scheduled time has arrived. The 0.06s initial delay is to give the audio time to start. So if we use `s.time <= now`, the playhead will appear ~60ms after the user presses play. That's noticeable but acceptable.
To make it appear immediately, let me schedule step 0 at nextNoteTime = audioCtx.currentTime (no delay). But this might cause scheduling issues if the audio isn't ready. Let me keep the 0.06s delay for safety.
Actually, you know what, let me just add the "upcoming step" highlight:
```js
for (const s of scheduledSteps) {
if (s.time <= now + 0.06) active = s.step; // 60ms look-ahead for visual sync
}
```
That way the playhead shows the upcoming step before its sound, which actually looks better visually.
Hmm, but this could show two steps simultaneously. Let me just take the most recent one within the window:
```js
let active = -1;
for (const s of scheduledSteps) {
if (s.time <= now + 0.06) active = s.step;
}
```
This picks the latest scheduled step that has either passed or is about to pass. Good.
Actually wait, let me reconsider. Each step lasts for `stepDur` seconds. During step N's window (between step N's start and step N+1's start), we want step N to be highlighted. So:
```js
let active = -1;
const lookAhead = 0.05; // highlight 50ms before sound for visual sync
for (const s of scheduledSteps) {
if (s.time <= now + lookAhead) active = s.step;
}
```
This should work. The playhead appears just before the sound and stays until the next step's time.
Hmm wait, between scheduled steps, if step N's time + lookAhead < step N+1's time, there might be a brief moment when neither is highlighted. Let me extend:
```js
const lookAhead = 0.05;
// Find the latest step whose time + lookAhead <= now
// And also ensure next step's time > now - lookAhead (we're still in current step's window)
```
This is getting complicated. Let me just use a simple approach: highlight the most recently scheduled step whose time has passed (or is about to pass). This should work for the most part.
Actually let me just keep it simple:
```js
let active = -1;
for (const s of scheduledSteps) {
if (s.time <= now) active = s.step;
}
```
The 60ms initial delay means the user sees the playhead move to step 0 about 60ms after pressing play. That's totally fine - the audio also starts 60ms after press. The visual and audio are synced.
OK let me just go with this.
Wait one more consideration. Let me also think about pattern display - when the page first loads, the pattern is empty. The user has to click cells to program. That's fine, but maybe I should pre-load a demo pattern so it's immediately playable. Let me do that:
```js
function loadDefault() {
// Classic 4-on-the-floor with snare on 5 and 13
for (let s = 0; s < STEPS; s++) {
pattern[0][s] = s % 4 === 0; // kick on every beat
pattern[1][s] = s === 4 || s === 12; // snare on 5 and 13
pattern[2][s] = s % 2 === 0; // hihat on every 8th
pattern[3][s] = s === 12; // clap on last beat
}
refreshGrid();
}
```
This is a classic pattern that demonstrates all four sounds. Let me load this on init.
Actually, let me make this the default loaded pattern. So users can immediately press play and hear something.
Let me finalize the code now. I'll write it all out as a single HTML file.
Let me think about one more polish item: when the playhead is on an active step, it should look really "punchy" - bright and energetic. When it's on an inactive step, just the outline. Let me add some extra emphasis:
```css
.step.playhead.active {
/* Extra glow when playhead hits active step */
transform: scale(1.05);
z-index: 2;
}
```
OK enough planning. Let me write the file.
Oh wait, I want to also add: when you click on the title or the STEP-16 logo, it could be a fun easter egg. Or let me not. Keep it simple.
Final code coming up.
Actually let me reconsider one design detail. The grid rows: each row has a label on the left. The row-label has the voice name and a preview button. Let me make sure this looks clean.
For "kick" row:
[KICK ▶] [□][□][□][□] [□][□][□][□] [□][□][□][□] [□][□][□][□]
The labels take ~110px, then 16 cells of equal width.
For mobile, the cells get smaller but still readable.
OK final HTML:
One more thing - the BPM input range should also have up/down buttons? Maybe not, the slider is enough.
Let me write the file now and check the result.
Let me also think about the playhead's pulse animation. Right now it uses CSS animation. This runs every time the playhead class is added. But I'm using rAF to update the class, which is 60fps. The pulse animation lasts 0.2s and runs once. So when the playhead moves to a new step, the new step's ::after element animates. That should work fine.
Actually, CSS animations restart when the element is re-added to the DOM or when the class is re-added. The class is removed and re-added each frame as the playhead moves. So the animation should restart on each step. Good.
Let me also check: in rAF, if I set `playhead` on step 0, then next frame it's on step 1. The previous step's `::after` is gone (because class was removed). The new step's `::after` is fresh and animates. Good.
But wait - if playhead is on step 0 for several frames, then moves to step 1, the animation only plays once at the start. After that, the outline is just static. That's fine.
To make it more dynamic, I could re-trigger the animation on each step. Let me toggle a class instead of just adding:
```js
el.classList.remove('playhead');
void el.offsetWidth; // force reflow
el.classList.add('playhead');
```
But this would happen every frame, not just on step change. Let me only trigger when step changes:
```js
let lastActive = -1;
function drawPlayhead() {
if (!isPlaying) return;
const now = audioCtx.currentTime;
let active = -1;
for (const s of scheduledSteps) {
if (s.time <= now) active = s.step;
}
if (active !== lastActive) {
// Step changed - remove old playhead, add to new
document.querySelectorAll('.step.playhead').forEach(el => el.classList.remove('playhead'));
if (active >= 0) {
document.querySelectorAll(`.step[data-step="${active}"]`).forEach(el => el.classList.add('playhead'));
}
lastActive = active;
}
requestAnimationFrame(drawPlayhead);
}
```
This avoids unnecessary DOM operations.
But CSS animations might not re-trigger if the class is removed and re-added in the same frame. Actually, if there's a frame gap between remove and add, the animation should re-trigger. With requestAnimationFrame, there should be a frame gap.
Hmm, but if I do `remove` then `add` synchronously, the browser might batch them. Let me use a small trick:
```js
el.classList.remove('playhead');
requestAnimationFrame(() => el.classList.add('playhead'));
```
Or use the offsetWidth trick:
```js
el.classList.remove('playhead');
void el.offsetWidth;
el.classList.add('playhead');
```
Actually, for visual style, the static playhead (no animation) is fine. The animation is a nice-to-have. Let me keep it simple and not worry about re-triggering.
OK final code:
Actually let me think about the kick sound one more time. I want it to sound like a real kick drum:
- Pitch envelope: starts high (~150Hz), drops quickly to ~50Hz, then to lower
- Amplitude envelope: sharp attack, exponential decay over ~0.5s
- Optional: a small click at the very beginning
My current implementation:
```js
osc.frequency.setValueAtTime(160, time);
osc.frequency.exponentialRampToValueAtTime(45, time + 0.08);
osc.frequency.exponentialRampToValueAtTime(35, time + 0.4);
```
Good. The frequency drops from 160 to 45 in 80ms (initial punch), then to 35 over 320ms (body).
```js
gain.gain.setValueAtTime(0.0, time);
gain.gain.linearRampToValueAtTime(1.3, time + 0.002);
gain.gain.exponentialRampToValueAtTime(0.001, time + 0.5);
```
Attack in 2ms, decay over 500ms. Good.
The click adds attack definition.
For snare:
- Noise component (filtered to be "snappy")
- Tonal component (the body)
- Duration ~200ms
Current implementation looks good.
For hihat:
- High-frequency noise
- Very short duration (~50ms)
- High-pass filter at 7000-8000Hz
Looks good.
For clap:
- Multiple short bursts (3) at ~13ms intervals
- Bandpass filter around 1200Hz
- Tail with longer decay
- Total duration ~150-200ms
Looks good.
OK final code time. Let me write it.
Actually let me reconsider one more thing - the volume. masterGain at 0.55. Each voice gain varies. Let me check:
- Kick: peak 1.3
- Snare: noise 0.7, tonal 0.5
- Hihat: 0.3
- Clap: bursts 0.5/i+1, tail 0.4
These can sum to quite a lot. With the compressor at threshold -12dB, ratio 4:1, it'll tame peaks.
Let me think about the overall level. Master at 0.55 with kick peak 1.3 = 0.715 final amplitude for kick. That's reasonable. The compressor catches any spikes.
OK final code. Writing now.
Oh, one more thing. The compressor setup: I'm creating it after masterGain but before destination. The chain is:
- Voice -> masterGain -> compressor -> destination
So all voices sum into masterGain, which goes through the compressor, then to destination. Good.
Let me finalize. Writing the HTML file now.
Let me also consider the visual feedback when audio context is suspended. On Chrome, autoplay is blocked until user interaction. The play button click should resume it. But until then, the AudioContext is suspended and any scheduled sounds won't play.
I handle this by calling audioCtx.resume() in the start() function (called on play button click). The button click is a user gesture, so resume() should work.
If somehow resume() fails (e.g., if called outside user gesture), the audio won't play. But since the only way to start playback is via the play button click, it should always be in a user gesture.
OK writing now.
Let me also add a small visual flair: the title "STEP-16" could have a subtle glow animation. Or the LED in the header could blink with the beat. Let me make the LED blink:
```js
// In drawPlayhead, also update LED
const led = document.getElementById('led');
// Make LED pulse with each step
if (active >= 0) {
led.style.background = 'var(--accent)';
led.style.boxShadow = '0 0 12px var(--accent)';
setTimeout(() => {
if (!isPlaying) return;
led.style.background = 'var(--muted)';
led.style.boxShadow = 'none';
}, 80);
}
```
Hmm that's hacky. Let me use CSS animation triggered by class:
```css
.led.beat {
animation: beat 0.15s ease-out;
}
@keyframes beat {
0% { background: var(--accent); box-shadow: 0 0 14px var(--accent); transform: scale(1.4); }
100% { background: var(--muted); box-shadow: none; transform: scale(1); }
}
```
In drawPlayhead, when step changes, add 'beat' class, remove after animation. Or use animation-iteration-count: infinite and trigger via animation-play-state.
Actually simpler: just toggle the .on class with timing. Let me skip this and keep it simple. The LED indicates play/stop state (on when playing, off when stopped). That's enough.
OK writing the final HTML file now.
Actually, one last thought: I should make the grid steps more visually distinct between groups of 4. Let me add subtle background tint to even groups:
Actually, the `beat-start` class already adds a vertical line. That's enough. Let me also add a subtle background tint for groups:
Hmm, maybe too much. Let me keep it minimal.
Final code:
Let me also add some tactile feel - subtle box-shadow on the machine itself to make it look like a physical device.
```css
.machine {
box-shadow:
0 30px 80px rgba(0,0,0,0.7),
inset 0 1px 0 rgba(255,255,255,0.05),
0 0 60px rgba(0,255,170,0.05),
0 0 0 1px rgba(255,255,255,0.02);
}
```
OK writing the file now.
One more thing - I realized that when I use `setTimeout` for the scheduler, the timing can drift. A better approach is to use `requestAnimationFrame` or audioContext's clock-based scheduling. Let me stick with the setTimeout-based lookahead scheduler since it's the standard approach for Web Audio.
```js
function scheduler() {
while (nextNoteTime < audioCtx.currentTime + 0.1) {
// Schedule step at nextNoteTime
VOICES.forEach((voice, vIdx) => {
if (pattern[vIdx][currentStep]) {
VOICE_FN[voice](nextNoteTime);
}
});
scheduledSteps.push({step: currentStep, time: nextNoteTime});
if (scheduledSteps.length > 32) scheduledSteps.shift();
nextStep();
}
if (isPlaying) schedulerTimer = setTimeout(scheduler, 25);
}
```
This is the standard pattern. Works fine.
OK writing the file now. Final code.
Let me also think about ergonomics on smaller screens. The grid has min-width: 700px. On phones, the user can scroll horizontally to see all steps. That's acceptable.
Let me also add some additional CSS for mobile:
```css
@media (max-width: 600px) {
.controls {
gap: 10px;
}
.play-btn {
min-width: 90px;
}
.bpm-control {
min-width: 100%;
}
}
```
OK final code.
Wait, I want to add one more thing - a "demo pattern" button or load default. Actually let me just initialize with a default pattern so users can immediately hear something:
```js
function loadDemo() {
for (let s = 0; s < STEPS; s++) {
pattern[0][s] = (s % 4 === 0); // kick on 1, 5, 9, 13
pattern[1][s] = (s === 4 || s === 12); // snare on 5, 13
pattern[2][s] = (s % 2 === 0); // hihat on every 8th
pattern[3][s] = (s === 14); // clap on 15 (the "and of 4")
}
refreshGrid();
}
```
Call this on init.
OK final code. Writing now.
One last detail: I want the random button to generate a sensible pattern, not just pure random. Let me bias it towards typical drum patterns:
```js
function randomize() {
for (let s = 0; s < STEPS; s++) {
// Kick: heavy on downbeats, light on offbeats
if (s % 4 === 0) pattern[0][s] = Math.random() < 0.8; // likely on 1, 5, 9, 13
else if (s % 2 === 0) pattern[0][s] = Math.random() < 0.3; // sometimes on other 8ths
else pattern[0][s] = Math.random() < 0.1; // rarely on 16ths
// Snare: usually on 5 and 13
if (s === 4 || s === 12) pattern[1][s] = Math.random() < 0.9;
else pattern[1][s] = Math.random() < 0.1;
// Hihat: usually on every 8th or 16th
pattern[2][s] = Math.random() < 0.6;
// Clap: on snare positions or as accent
pattern[3][s] = (s === 4 || s === 12) ? Math.random() < 0.5 : Math.random() < 0.08;
}
refreshGrid();
}
```
This gives more musical random patterns.
OK truly final code now. Let me write it out.Looking at this request, I'll build a polished 16-step drum machine with: - 4 voice rows (kick, snare, hi-hat, clap) × 16 step grid - All sounds synthesized via Web Audio API - Play/Stop, BPM slider (60-200), clear/randomize - Visual playhead synced to audio - Pre-loaded demo pattern so it makes sound immediately - Click row labels to preview sounds Let me first check the workspace, then build the file.
→ bash
{"command":"ls /workspace"}toolResult
(no output)
assistant
thinking
Empty workspace. Let me write the index.html file.
→ write
/workspace/index.html (22187 bytes)toolResult
Successfully wrote 22187 bytes to /workspace/index.html
assistant
thinking
Now let me verify the file is well-formed and check the implementation.
→ bash
{"command":"ls -la /workspace/ && head -5 /workspace/index.html && echo \"---\" && tail -3 /workspace/index.html"}toolResult
total 28 drwxrwxrwx 3 node node 96 Jul 22 16:55 . drwxr-xr-x 1 root root 4096 Jul 22 16:51 .. -rw-r--r-- 1 node node 22188 Jul 22 16:55 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> --- </script> </body> </html>
assistant
thinking
The file is created. Let me also do a quick sanity check that the JS doesn't have any obvious syntax errors by doing a quick parse check using node:
Let me do a quick syntax sanity check on the JavaScript:
→ bash
{"command":"node -e \"\nconst fs = require('fs');\nconst html = fs.readFileSync('index.html', 'utf8');\nconst m = html.match(/<script>([\\s\toolResult
JS syntax OK
assistant
thinking
JS parses fine. Let me also quickly verify the HTML structure:
→ bash
{"command":"grep -c \"^\" /workspace/index.html && echo \"lines\" && grep -n -E \"id=\\\"\" /workspace/index.html"}toolResult
825 lines 422: <span class="led" id="led"></span> 423: <span id="status">STOPPED</span> 428: <button id="playBtn" class="play-btn">▶ PLAY</button> 431: <input type="range" id="bpm" min="60" max="200" value="120"> 432: <span class="bpm-value" id="bpmValue">120</span> 434: <button id="clearBtn">CLEAR</button> 435: <button id="randomBtn">RANDOM</button> 439: <div class="grid" id="grid"></div> 440: <div class="step-numbers" id="stepNumbers"></div>
assistant
All element IDs match what the JavaScript references. The file is in place. I've built **`/workspace/index.html`** — a single self-contained file with everything inline. No network calls, no external resources. **What's in it:** 🎛 **4 voices, 16 steps** — clickable grid for kick / snare / hi-hat / clap, with beat-group separators between steps 4/8/12. 🔊 **All sounds synthesized with Web Audio API:** - **Kick** — sine with pitch envelope (160→45→35 Hz) + tiny noise click for attack - **Snare** — highpassed/bandpassed noise + triangle tonal body - **Hi-hat** — dual highpassed noise, short decay - **Clap** — 3 quick bandpassed noise bursts + filtered tail A master gain feeds a soft compressor for a cohesive mix. ▶ **Controls:** - **Play/Stop** button (toggles, color shifts green→red) - **BPM** slider, 60–200, with live digital readout - **Clear** and **Random** (musically biased — favors downbeats, snare on 2 & 4, etc.) - **Spacebar** play/stop - Clicking a row label previews that voice - Clicking an empty cell activates it and auditions the sound 👀 **Visual feedback:** - Animated playhead outline (accent green) follows the current step in real time - Active cells glow in their voice's color (kick=red, snare=cyan, hat=yellow, clap=pink) - Header LED pulses and changes color to match the active voice on each step - Status indicator shows PLAYING/STOPPED It boots with a classic 4-on-the-floor demo pattern loaded, so pressing Play immediately produces a beat. Open `index.html` in any modern browser.
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
modelminimax-m3
vendorMiniMax
harnesspi-agent
generated2026-07-22
EVALUATION
★★★★★ 4/5 working
16-step drum machine grid with BPM slider, play/stop, click toggles cells, keyboard controls playback and step navigation.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.
idle motion0.0%
on click0.4%
on drag0.2%
on wheel0.2%
on enter + space2.4%
on arrow keys2.0%
on w/a/s/d1.9%
frame spread35.4 / 255
console errors0
js errors none
METRICS
runtime243.5s
tokens in26k
tokens out31k
cached128k
cost / run$0.0524