Drum roll

@xromdev/drumroll v0.1.0 · MIT

The NES has no drums — it has a noise channel, and sixteen rates for it. This reads each rate as a piece of a kit, and the hits fall onto the pieces: the kick swells and rebounds, an open hat swings, a closed one ticks. The falling area is @xromdev/roll, the same core as the piano roll, so the two stack and follow one clock. Below, the noise channel alone: every drum, and any NSF's drums — mute or solo any piece and hear it at once, or play the kit yourself, pad by pad.

npm install @xromdev/drumrollnpm ↗GitHub ↗@xromdev/roll ↗Piano roll →
noise rates, read as a drum kit
16
noise rates, read as a drum kit
pieces, each moving its own way
8
pieces, each moving its own way
framework renders per frame
0
framework renders per frame
gzipped, on @xromdev/roll
~6 KB
gzipped, on @xromdev/roll
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

M 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} />