# drum-steps

> A drum clip's notes as steps: a row per pad, a step per stretch of the grid, with each step's velocity, chance and shift, and the edits a step sequencer makes on the notes (switch a step, set its level, fill a row every n steps).

```bash
npx shadcn@latest add @audio-ui/drum-steps
```

```ts
import { MAX_SHIFT, STEP_VELOCITY, stepsOf, withStep, withStepLevel, /* … */ } from "@/lib/drum-steps";
```

- Files: `lib/drum-steps.ts`
- Depends on: nothing; npm: `@audio-ui/core`
- Used by: `drum-step-editor`

| Export | Kind | What it is |
| --- | --- | --- |
| `StepCell` | interface | A row and a step of a grid. |
| `StepGrid` | interface | The steps a clip is seen on: a row per pad, by its note, top to bottom, `steps` steps `step` long from `start`, such as its loop's start. |
| `Steps` | interface | What each step of each row plays: a row per pad, a value per step. |
| `StepLevel` | type | What the lane under the steps sets on a step's notes. |
| `MAX_SHIFT` | const | The latest a step's note can be shifted, as a share of the step. |
| `STEP_VELOCITY` | const | How hard a step switched on plays. |
| `stepsOf` | function | The steps the notes play on `grid`. |
| `withStep` | function | The notes with the step `cell` switched on, a note a step long added on its pad, or off, every note in it taken away; the same notes when it already is so. |
| `withStepLevel` | function | The notes with what the lane sets on the step `cell`: its notes' velocity or chance, 0 to 1, or how late they start, as a share of a step up to `MAX_SHIFT`. |
| `filledEvery` | function | The notes with the row `row` playing every `every` steps from the first, and nothing else. |
| `MAX_REPEATS` | const | The most a step can repeat in a roll. |
| `withStepRepeats` | function | The notes with the step `cell` played `count` times, a roll: as many hits as even across the step, each as loud as its first note was, or one hit again with `count` 1. |

## Usage

A drum clip's notes as steps, a row per pad, as a step sequencer shows them, and the edits a step sequencer makes, back onto the notes.

```ts
import { stepsOf, withStep } from "@/lib/drum-steps";

const steps = stepsOf(notes, grid); // each step's velocity, chance, shift and repeats, by row
const next = withStep(notes, grid, { row: 0, step: 4 }, true); // a hit on the kick, fifth step
```

`withStepLevel` sets a step's velocity or chance, `withStepRepeats` rolls it, and `filledEvery` fills a row every 2, 4 or 8 steps. The notes stay the clip's own: the [drum step editor](/docs/components/base/arrangement#drums) draws them as steps and edits them through these.