Pocket Player
A pocket cassette player for your recordings. PLAY latches down; STOP springs it back and, stopped, pops the door open on its spring. Choose a recording and it swaps the tape and plays.
Built with Cassette
What it is for
The audio section of a product that keeps recordings: incident calls for an on-call or devtools product, standups and interviews for a meeting recorder, field notes for an IoT crew, episodes of a company podcast.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Latching transport reducer, Sprung door hard stop, Auto stop, Eject swap shut sequence, Css 3d hinge, Container query layout, Object in deps, Media binding, Finish following, Sleeping loop
- Stack
- Vanilla ES modules, CSS, Canvas 2D
- Needs
- Cassette
- States
- 13 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restTape 1 in the player at 32 %, the door shut, all keys up, the lamp dark, the counter reading the position; nothing runs.
- PlayingPLAY latches part-way down; the lamp lights green; the counter runs; the cassette's hubs turn at tape speed and its packs follow.
- WindingFF or REW latch; the lamp is amber; the hubs spin at 14× (backwards for REW); the counter runs fast; at an end the key is thrown back up.
- StoppedSTOP springs every latched key back up past its rest; the lamp goes dark.
- EjectSTOP again: the door pops open on its spring past 24°, rocks and settles, its shadow deepening and its glass catching the lamp; the head and capstans show at the top of the bay.
- ShutSTOP again, a push on the door, or any running key: the door swings shut against its stop and the latch gives a little back.
- Choosing a recordingThe player stops, ejects, swaps the tape's title and length, winds to the start, shuts and plays; the list marks the tape in the player.
- ScrubbingTurn a hub on the cassette: the counter follows, and with audio the player seeks.
- AluminiumA bead-blasted aluminium body, face keys and a black contrast PLAY, a reflective LCD counter.
- GraphiteA soft-touch graphite body, light contrast PLAY, a vacuum-fluorescent counter.
- PhoneHead, player and list in one column; the player fills the width and every part scales with it.
- Off screen or hiddenThe loop pauses and resumes.
- Reduced motionThe door is open or shut at once, keys move without spring, the tape jumps; every state still shows.
Notes
The player is a real transport (PLAY, REW and FF latch, STOP releases and ejects) and choosing another recording plays out as a hand would do it, so the page explains itself. Give each recording a src and it plays the audio; without one it runs for its duration.
Original composition. The product (Wardroom), its incidents and recordings are invented. The player is CSS drawn here around the Cassette object, which is handed in as deps.Cassette. Faces: Instrument Sans and Geist Mono, both the kit's own, SIL OFL 1.1.
Anatomy
Latching transport reducer, Sprung door hard stop, Auto stop, Eject swap shut sequence, Css 3d hinge, Container query layout, Object in deps, Media binding, Finish following, Sleeping loop
Usage notes
The audio section of a product that keeps recordings: incident calls for an on-call or devtools product, standups and interviews for a meeting recorder, field notes for an IoT crew, episodes of a company podcast. The player is a real transport (PLAY, REW and FF latch, STOP releases and ejects) and choosing another recording plays out as a hand would do it, so the page explains itself. Give each recording a src and it plays the audio; without one it runs for its duration.
Options
| Option | Type | Description |
|---|---|---|
| eyebrow | text | Eyebrow |
| heading | text | Headline |
| lede | text | Lead |
| tape | number | Which recording is loaded when the page opens. |
| position | number | Where that tape is when the page opens. |
| shell | enum | Cassette shell |
| hubs | enum | Hubs |
| model | text | Printed on the player |
| list | boolean | Choose one and the player stops, ejects, swaps the tape, shuts and plays. |
| finish | enum | Auto follows the page’s data-finish, then the visitor’s system. |
| sound | boolean | Synthesised, no audio file: the keys latch and spring up, the door kicks out and thuds shut, fast wind whirs. Only after a press. |
Methods
- update
- state
- cassette
- destroy
How it works
Original composition. The product (Wardroom), its incidents and recordings are invented. The player is CSS drawn here around the Cassette object, which is handed in as deps.Cassette.