Pocket Player

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.

Copy the pocket-player folder and the cassette folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="cassette/cassette.css">
<link rel="stylesheet" href="pocket-player/pocket-player.css">
<div id="pocket-player"></div>

<script type="module">
  import Cassette from './cassette/cassette.mjs';
  import { mount } from './pocket-player/pocket-player.mjs';

  const pocketPlayer = mount(document.getElementById('pocket-player'), {
    eyebrow: 'Incident audio',
    heading: 'Every war room, on tape.',
    lede: 'Wardroom records the bridge call from the first page to the all-clear and files it with the timeline. Find the minute someone said “roll it back”, and hear it.',
  }, { Cassette });

  // pocketPlayer.update({ … });   change any option in place
  // pocketPlayer.destroy();        and take it away again
</script>

mount(element, options, { Cassette })

Builds the block inside the element and returns its handle. Hand it the Cassette it is built with.

handle.update(next = {})

Change options in place.

handle.state

handle.cassette

handle.destroy()

Stops it and cleans up after it.

1. At restTape 1 in the player at 32 %, the door shut, all keys up, the lamp dark, the counter reading the position; nothing runs.
2. PlayingPLAY latches part-way down; the lamp lights green; the counter runs; the cassette's hubs turn at tape speed and its packs follow.
3. 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.
4. StoppedSTOP springs every latched key back up past its rest; the lamp goes dark.
5. 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.
6. 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.
7. 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.
8. ScrubbingTurn a hub on the cassette: the counter follows, and with audio the player seeks.
9. AluminiumA bead-blasted aluminium body, face keys and a black contrast PLAY, a reflective LCD counter.
10. GraphiteA soft-touch graphite body, light contrast PLAY, a vacuum-fluorescent counter.
11. PhoneHead, player and list in one column; the player fills the width and every part scales with it.
12. Off screen or hiddenThe loop pauses and resumes.
13. Reduced motionThe door is open or shut at once, keys move without spring, the tape jumps; every state still shows.

Made of: 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.

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.

• 12CassetteA clear cassette as a progress bar.