Drum roll

@xromdev/drumroll v0.2.0 · MITnpm i @xromdev/drumrollnpm ↗GitHub ↗@xromdev/roll ↗Piano roll →

The noise channel’s sixteen rates read as a drum kit: hits fall onto pieces that move when struck. Mute, solo, or play the kit yourself.

16 noise rates · 8 pieces · 0 framework renders a frame · ~6 KB gzipped

or drop one here — only its drums are played

Every drum in the kit

eight bars on the noise channel alone, through all sixteen of its rates — looped

124 hits · 16 s of the noise channel alone

look ahead2.5 ssparkspieces moveM and S under each piece: mute or solo that drum — you hear it at once.measuring…

Use it — any page

import { DrumRollView } from '@xromdev/drumroll';
import '@xromdev/drumroll/drumroll.css';

const kit = new DrumRollView(document.querySelector('#drums'));
kit.setHits([
  // period: the noise channel's $400E rate, 0 (fastest) .. 15 (slowest)
  { period: 15, start: 0, duration: 0.1 },    // kick
  { period: 1, start: 0.25, duration: 0.05 }, // hi-hat
  { period: 7, start: 0.5, duration: 0.1 },   // snare
]);
kit.play(() => audioContext.currentTime - startedAt);

Use it — React

import { DrumRoll } from '@xromdev/drumroll/react';
import '@xromdev/drumroll/drumroll.css';

<DrumRoll hits={hits} clock={() => audio.currentTime} height={300} />

// Your own kit: names, colours and drawings per lane
<DrumRoll hits={hits} lanes={[{ period: 15, label: 'bass drum' }]} time={position} />