# 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.

Block · With a Pass · https://tactileui.dev/blocks/pocket-player

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## 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

## States

1. **At rest**: 
2. **Playing**: PLAY latches part-way down; the lamp lights green; the counter runs; the cassette's hubs turn at tape speed and its packs follow.
3. **Winding**: FF or REW latch.
4. **Stopped**: STOP springs every latched key back up past its rest; the lamp goes dark.
5. **Eject**: 
6. **Shut**: STOP again, a push on the door, or any running key: the door swings shut against its stop and the latch gives a little back.
7. **Choosing a recording**: The 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.
8. **Scrubbing**: Turn a hub on the cassette: the counter follows, and with audio the player seeks.
9. **Aluminium**: A bead-blasted aluminium body, face keys and a black contrast PLAY, a reflective LCD counter.
10. **Graphite**: A soft-touch graphite body, light contrast PLAY, a vacuum-fluorescent counter.
11. **Phone**: Head, player and list in one column; the player fills the width and every part scales with it.
12. **Off screen or hidden**: The loop pauses and resumes.
13. **Reduced motion**: The door is open or shut at once, keys move without spring, the tape jumps; every state still shows.

## 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.