LIVE DEMO

Drum Machine Plugin

A 16/32-step sequencer with 8 synthesized instruments, swing, per-step velocity, and session-persistent patterns. Click Play to start. Right-click any step to set velocity. Bounce renders to a downloadable WAV.

8
INSTRUMENTS
32
MAX STEPS
4
PRESETS
0
DEPS
⬡ DRUM MACHINE v2.0 · WavrPlugin Ready
⚠ Audio notice:  Browser autoplay policy requires a user gesture before audio starts. Click Play inside the plugin to activate the audio context.
Play
Click Play inside the plugin to start the sequencer.
Steps
Click any step button to toggle it. Right-click for velocity.
Bounce
Click ↓ Bounce to render a WAV. It appears in the sidebar.
Presets
Try Hip Hop, House, Techno, or Jungle in the footer.
BOUNCED AUDIO
No bounces yet — click ↓ Bounce inside the plugin.
REGISTER IN WAVR PRO
// WavrPro.jsx — add these
import DrumMachine
  from "./plugins/DrumMachine";

// Inside component:
const pm = usePluginManager({
  audioCtxRef, bpmRef ...
});

useEffect(() => {
  pm.register(DrumMachine);
}, []);

// In topbar:
<button onClick={() =>
  pm.toggle("drum-machine")}>
  Drums
</button>

// In JSX:
{pm.plugins.filter(p => p.isOpen)
  .map(p => (
  <PluginShell
    pluginClass={p.cls}
    hostAPI={pm.getHostAPI(p.id)}
    open={p.isOpen}
    onClose={() =>
      pm.close(p.id)}
  />
))}
STANDALONE (NO REACT)
<script src="WavrPlugin.js"></script>
<script src="DrumMachine.js"></script>

const dm = new DrumMachine({
  audioContext: ctx,
  bpm: 120
});

dm.onRender = (buf, bpm) => {
  // got AudioBuffer
};

dm.mount(
  document.getElementById("host")
);