<audio-ui-pad> is a grid of velocity-sensitive pads with role="group". A pad sounds while held, by pointer or with Enter and Space, and each pointer holds its own pad. Velocity comes from pen or touch pressure, or from the vertical press position. The pads share one tab stop and are navigated with the arrow keys.
Usage
The styles read the theme's CSS variables, which Styling sets.
<style>
audio-ui-pad {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: calc(var(--spacing, 0.25rem) * 2 * var(--density, 1));
width: calc(var(--spacing, 0.25rem) * 72);
}
audio-ui-pad-item {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
border-radius: calc(var(--radius, 0.625rem) - 2px);
background: var(--muted, oklch(0.97 0 0));
color: var(--muted-foreground, oklch(0.556 0 0));
font-size: 0.75rem;
line-height: 1rem;
outline: none;
user-select: none;
transition:
color 150ms,
background-color 150ms;
}
audio-ui-pad-item:focus-visible {
box-shadow: 0 0 0 2px var(--ring, oklch(0.708 0 0));
}
audio-ui-pad-item[data-active] {
background: var(--primary, oklch(0.205 0 0));
color: var(--primary-foreground, oklch(0.985 0 0));
}
</style>
<audio-ui-pad aria-label="Drums">
<audio-ui-pad-item value="kick">Kick</audio-ui-pad-item>
<audio-ui-pad-item value="snare">Snare</audio-ui-pad-item>
<audio-ui-pad-item value="hat">Hat</audio-ui-pad-item>
<audio-ui-pad-item value="clap">Clap</audio-ui-pad-item>
</audio-ui-pad>
<script type="module">
import "@audio-ui/elements/pad";
const pad = document.querySelector("audio-ui-pad");
pad.addEventListener("padon", (event) =>
console.log(event.detail.value)
);
</script>API reference
pnpm add @audio-ui/elements
import "@audio-ui/elements/pad";| Export | Kind | What it is |
|---|---|---|
PAD_TAGS | const | The names the pad's elements are registered under, frozen: a page cannot rename them by accident. |
PadElement | class | The root of a velocity-sensitive pad grid, with role="group". |
PadElementEventMap | interface | The events a pad grid fires, as addEventListener types them. |
PadItemElement | class | A pad, a button that sounds while held, by pointer or with Enter and Space. |
PadOffDetail | interface | What a padoff event carries: the pad released, and why. |
PadOffEvent | type | Fired when a pad stops sounding. |
PadOnDetail | interface | What a padon event carries: the pad struck, how hard, and how. |
PadOnEvent | type | Fired when a pad is struck. |
Props · 3
Pads per row, used by Up and Down. Match it in the layout.
Pads lit externally, such as by a sequencer or MIDI input, separated by spaces. The
activePads property accepts an array.| Event | Detail | Description |
|---|---|---|
padon | { value, velocity, reason } | A pad is struck. preventDefault() keeps it silent |
padoff | { value, reason } | A pad is released; reason is "choke" when another pad of its group stopped it |
| Part | Description |
|---|---|
<audio-ui-pad-item> | A pad, a button labelled by its content. value identifies it in events, choke-group makes pads stop each other, and disabled silences it. Sets --pad-velocity (0 to 1) to the last strike's velocity |
The same control in React, and its parts' props: Pad.