Deck
A player for a DJ booth, made of the kit's own materials. A screen with the whole loop as an overview strip and a zoomed waveform scrolling past the playhead on its beat grid, both drawn from the audio you hear; a jog wheel you scratch and nudge; cue and play keys; a tempo fader; up to eight pads; and a back panel you flip to, where the line out plugs in.
What it is for
The player half of a booth, or a media player that wants to look and behave like hardware: a music app, a podcast editor, a sample pad, an audio tool's landing page.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 8 days. Want one email that morning?
Datasheet
- Mechanism
- Audio made in the page, Waveform from the heard samples, Scrolling beat grid, Platter scratch as grains, Rim tempo nudge, Quantised hot cues, Beat loops, Latency held picture, Declared mixer channel, Two faced 3d flip, Container query layout
- Stack
- Vanilla ES modules, Dom, Canvas 2D, Web Audio, CSS
- Needs
- Nothing, no dependencies
- States
- 12 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- StoppedThe playhead stands; the screen shows the loop, the cues and the time left. Nothing sounds, and nothing has been asked of the browser.
- PlayingThe zoomed waveform scrolls past a fixed playhead on its beat grid (a line a beat, a numbered one a bar); the overview lights the played part; the platter turns; the beat lamps follow. The picture is held back by the output latency so it matches what is heard.
- CueWhile playing it goes back to the cue point and stops. Stopped away from the cue it sets the cue here; stopped on the cue, holding it plays and letting go returns.
- ScratchA hand on the face of the jog holds the loop and follows the hand, played as short grains at the hand's speed, forward or reversed; letting go carries on from where it left.
- NudgeA hand on the rim bends the tempo by up to ten percent while it moves; the wheel on the jog does the same by a notch.
- Hot cuesFour to eight pads: an empty one sets a cue at the playhead (to a sixteenth), a set one jumps to it, Clear removes one. Each cue is a flag on the waveform and a tick on the overview.
- LoopsIn Loop mode a pad loops a quarter of a beat up to thirty-two from the beat before the playhead; pressing it again leaves. The loop is shaded on both waveforms.
- TempoA fader, plus or minus 4 to 16 percent; the screen reads the BPM and the change; Sync matches another deck on the same mixer and lands on its beat.
- Back panelThe deck turns over to its line out (left and right), link ports, USB and power, and a selector for the mixer channel the line out feeds. Change the channel and the cable moves.
- KeyboardEvery control is reachable by Tab. The jog is a slider: arrows step a sixteenth, up and down a beat, Page keys a bar, Home goes to the cue.
- FinishesAll twelve, Tactile and Quiet: faces, the jog's rim and the pads read the kit's tokens. One lamp; the screens stay dark glass.
- Reduced motionThe deck does not turn over and the platter does not spin; the picture updates about eight times a second.
Notes
It plays a loop made in the page, shows it as two waveforms, lets you cue it, loop it, scratch it and bend its tempo, and says which mixer channel it feeds. Alone it plays through the room; with a Mixer it plugs into a channel and the cable between them is drawn on the back panels.
Original. The two loops are tables of sixteenth-note steps rendered sample by sample in the page (originals/components/shared/desk/loops.mjs), and the waveforms and the meters read the frames analysed from those same samples. It needs the Tactile UI Kit's stylesheets on the page (panel, key, toggle key, fader, seg, select, lamp); the Code tab's example links them from /kit/. It shares its desk helpers with the Mixer.
Anatomy
Audio made in the page, Waveform from the heard samples, Scrolling beat grid, Platter scratch as grains, Rim tempo nudge, Quantised hot cues, Beat loops, Latency held picture, Declared mixer channel, Two faced 3d flip, Container query layout
Usage notes
The player half of a booth, or a media player that wants to look and behave like hardware: a music app, a podcast editor, a sample pad, an audio tool's landing page. It plays a loop made in the page, shows it as two waveforms, lets you cue it, loop it, scratch it and bend its tempo, and says which mixer channel it feeds. Alone it plays through the room; with a Mixer it plugs into a channel and the cable between them is drawn on the back panels.
Options
| Option | Type | Description |
|---|---|---|
| track | enum | The loop on the deck. Both are made in the page; nothing is streamed. |
| name | text | Printed on the deck and read out by a screen reader. |
| side | enum | The front panel, or the back with the line out, the link ports and the power. The deck turns over. |
| pads | number | How many performance pads: four to eight. |
| padMode | enum | Hot cue: press an empty pad to set a cue, a lit one to jump to it. |
| screen | enum | Bands colours low, mid and high in three tints of the lamp; solid is one. |
| range | number | How far the tempo fader goes either way. |
| out | number | The mixer channel its line out feeds. With a mixer connected, change it and the cable moves. |
| label | text | Empty reads the name and "a player". |
Methods
- update
- connect
- flip
- playing
- play
- pause
- destroy
How it works
Original. The two loops are tables of sixteenth-note steps rendered sample by sample in the page (originals/components/shared/desk/loops.mjs), and the waveforms and the meters read the frames analysed from those same samples. It needs the Tactile UI Kit's stylesheets on the page (panel, key, toggle key, fader, seg, select, lamp); the Code tab's example links them from /kit/. It shares its desk helpers with the Mixer.