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.

INSTRUMENTS

MAX STEPS

PRESETS

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.

// 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")
);