@oliego/wavr-drum-machine

A 16/32-step drum sequencer with 8 fully synthesized instruments. Runs standalone in any browser or as a plugin inside wavr-pro.

SPONSOR: → Oliego.Space - Create without limits!

Install

npm install @oliego/wavr-drum-machine

Zero dependencies. Web Audio API only.

Quickstart

Standalone (any framework or plain JS)

import DrumMachine from '@oliego/wavr-drum-machine';

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

dm.mount(document.getElementById('my-container'));

// Called every time the user hits Bounce
dm.onRender = (audioBuffer, bpm) => {
  console.log(`Got ${audioBuffer.duration.toFixed(2)}s of audio at ${bpm} BPM`);
};

// Called on every pattern change
dm.onPatternChange = (pattern) => {
  localStorage.setItem('dm-pattern', JSON.stringify(pattern));
};

As a WAVR PRO plugin

import DrumMachine from '@oliego/wavr-drum-machine';

// Inside WavrPro — register once
pluginManager.register(DrumMachine);

// The plugin appears in the topbar automatically.
// Bounce sends audio directly to a new DAW track.

React

import { useEffect, useRef } from 'react';
import DrumMachine from '@oliego/wavr-drum-machine';

export default function DrumPad() {
  const containerRef = useRef(null);

  useEffect(() => {
    const ctx = new AudioContext();
    const dm  = new DrumMachine({ audioContext: ctx, bpm: 120 });
    dm.mount(containerRef.current);
    return () => dm.destroy();
  }, []);

  return <div ref={containerRef} />;
}

Instruments

| ID | Label | Synthesis | | --------- | --------- | ---------------------------------- | | kick | Kick | Pitch-swept sine + click transient | | snare | Snare | Bandpass noise + triangle body | | clap | Clap | Triple-layer bandpass noise | | hhc | HH Closed | Highpass noise, 50ms | | hho | HH Open | Highpass noise, 350ms | | tom_hi | Tom Hi | Pitch-swept sine 280→120Hz | | tom_mid | Tom Mid | Pitch-swept sine 180→75Hz | | ride | Ride | Bandpass noise, 500ms |

API

Constructor

new DrumMachine({ audioContext, bpm, steps, container })

| Option | Type | Default | Description | | -------------- | -------------- | ------------------ | ----------------------------- | | audioContext | AudioContext | new AudioContext() | Pass your existing context | | bpm | number | 120 | Initial BPM | | steps | number | 16 | 16 or 32 | | container | HTMLElement | null | Mount immediately if provided |

Methods

dm.mount(el)          // Render UI into el
dm.destroy()          // Stop, remove UI, disconnect audio nodes
dm.start()            // Begin sequencer loop
dm.stop()             // Halt sequencer
dm.toggle()           // Start or stop
dm.setBpm(120)        // Update BPM (call when host transport changes)
dm.getPattern()       // Returns serialisable state object
dm.loadPattern(state) // Restore from getPattern() snapshot
await dm.renderToBuffer() // Returns Promise<AudioBuffer> — 1 bar offline render

Callbacks

dm.onRender        = (AudioBuffer, bpm) => {}  // Fired after renderToBuffer()
dm.onPatternChange = (pattern) => {}           // Fired on every step toggle
dm.onStepTick      = (stepIndex) => {}         // Fired on every 16th note

Pattern format (getPattern / loadPattern)

{
  bpm: 120,
  steps: 16,           // 16 or 32
  swing: 0,            // 0–75
  master: 0.85,        // master volume 0–1
  pattern: {
    kick:    [{ active: true,  velocity: 0.9 }, { active: false, velocity: 0.8 }, ...],
    snare:   [...],
    // one array per instrument, length === steps
  },
  instrVols: {
    kick: 1.0, snare: 1.0, ...
  }
}

Presets

Four built-in genre presets, each sets BPM, swing, and a 32-step pattern:

| Preset | BPM | Swing | | -------- | --- | ----- | | hiphop | 90 | 30% | | house | 128 | 0% | | techno | 138 | 0% | | jungle | 170 | 15% |

Load programmatically: dm._loadPreset('house') or click the preset buttons in the UI.

UI controls

The plugin renders its own complete UI into the mounted element:

• Play / Stop — start and stop the sequencer
• BPM input — tempo control
• Steps — switch between 16 and 32 steps
• Swing — 0–75% swing on off-beats
• Master volume
• Step grid — click to toggle, right-click for per-step velocity
• Per-instrument — volume slider, Mute (M), Solo (S)
• Clear — remove all active steps
• Randomize — generate a random pattern based on genre-appropriate densities
• Bounce — render 1 bar to AudioBuffer and fire onRender
• Presets — Hip Hop, House, Techno, Jungle

Licence

MIT