← Playground一覧に戻る
other

Drum Beat Sequencer

A grid-based drum sequencer with 8 instruments and expandable steps. Click cells to compose beats directly on the timeline.

Drum Beat Sequencer

A grid-based drum machine with 8 synthesized instruments. All sounds are generated in real-time using the Web Audio API — no audio files needed.

How to Play:

  • Tap cells directly on the grid to toggle beats on/off
  • Tapping an inactive cell activates it and plays a sound preview
  • Tapping an active cell deactivates it
  • Press Play to start the loop and hear your pattern
  • Use Add Steps / Remove Steps to adjust the timeline length

Controls:

  • Play/Stop — Start or stop loop playback
  • Clear — Reset all cells to inactive
  • BPM ( / ) — Adjust tempo (60–200 BPM)
  • Steps ( / +) — Adjust timeline length by 4 (8–32 steps)

Instruments (top to bottom):

  • Hi-Hat (yellow) — closed hi-hat cymbal
  • Hi-Hat Open (amber) — open hi-hat with longer decay
  • Ride (lime) — bright ride cymbal
  • Crash (green) — crash cymbal
  • Snare (blue) — snare drum with wire buzz
  • High Tom (violet) — high-pitched tom
  • Low Tom (purple) — low-pitched tom
  • Kick (red) — deep bass drum