EZ Web Audio

Appearance

Sampled Drum Kit ​

Play realistic drum sounds with round-robin sample variations for more natural playback.

KICK
Sample 1/3
SNARE
Sample 1/3
HI-HAT
Sample 1/3
Each pad cycles through 3 sample variations (round-robin)

What is Round-Robin? ​

Round-robin is a technique where multiple recordings of the same instrument are cycled through during playback. This creates a more natural, realistic sound compared to playing the same sample repeatedly.

Why it matters:

  • Prevents the "machine gun" effect — repeatedly playing one sample sounds artificial and robotic
  • Adds variation — each sample has slight differences in tone, attack, and decay
  • Sounds more human — mimics how real drummers never hit a drum exactly the same way twice

In this demo, each drum pad cycles through 3 different recordings. Watch the sample counter to see which variation is playing.

How It Works ​

The createSampler() function loads multiple audio files and automatically rotates through them on each play() call:

typescript
import { createSampler } from 'ez-web-audio'

const kick = await createSampler([
  '/audio/kick1.wav',
  '/audio/kick2.wav',
  '/audio/kick3.wav'
])

kick.play() // Plays kick1
kick.play() // Plays kick2
kick.play() // Plays kick3
kick.play() // Plays kick1 (wraps around)

Each call to play() automatically advances to the next sample in the array, creating natural variation without any manual tracking.

Comparison with Synthesis ​

Compare this sampled drum kit with the Synth Drum Kit which creates all sounds from synthesis. Sampled drums sound more realistic but require larger audio files, while synthesized drums are more flexible and use zero bandwidth.

Sampled drums:

  • ✅ Realistic, authentic instrument sound
  • ✅ Natural acoustic characteristics
  • ❌ Larger file sizes (3 samples × 3 drums = ~2.8MB)
  • ❌ Fixed timbre (can't change the sound much)

Synthesized drums:

  • ✅ Tiny file size (code only)
  • ✅ Fully customizable (frequency, waveform, filter, envelope)
  • ❌ Harder to make sound realistic
  • ❌ Requires synthesis knowledge

API Used ​

This example demonstrates:

  • createSampler(urls) — Create a round-robin sampler from audio file URLs
  • sampler.play() — Play the next sample in rotation
  • Loading multiple files — Each sampler loads 3 WAV files (~300-500KB each)

Next Steps ​