Cassette

A progress display people read at a glance and want to touch. Given a number it is the progress of an upload, a render or export, a migration, an agent's run: the hubs turning while it works and stopping when it waits. Bound to an <audio> or <video> element it is a player's position for a podcast, a voice memo or a call recording, speaking "2:14 of 5:30" and seeking when wound. It is a real slider (0–100 %, or seconds), keyboard-operable, with a read-only mode for pure readouts.

Copy the cassette folder from its package next to your page, link its stylesheet and construct 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">
<div id="cassette" style="width: min(90vw, 640px)"></div>

<script type="module">
  import Cassette from './cassette/cassette.mjs';

  const cassette = new Cassette(document.getElementById('cassette'), {
    progress: 0.32,
    playing: true,
    speed: 1,
  });

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

new Cassette(element, options)

Builds it inside the element with these options.

value

Progress, 0…1.

playing

update(opts = {})

Change options in place.

setProgress(p, { instant = false } = {})

Set the progress (0…1).

play()

pause()

destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: input, change.

1. At restThe packs show the progress; the scale under the window reads the right pack's edge; the loop is asleep.
2. RunningThe hubs turn at tape speed (4.76 cm/s × speed): the near-empty hub fast, the full one slowly.
3. New valuesetProgress() or a media seek: the packs roll to the value and the hubs spin up as in fast-forward, then stop.
4. Turning a hubPress on a pack and turn: the hub follows the finger exactly and the other follows the tape; input fires on every change, change when it lifts.
5. Dragging acrossPress anywhere off the packs and drag sideways: one cassette width winds the whole tape.
6. KeyboardArrows step 1 % (5 s with media), Page keys ten times that, Home and End go to the ends; Space plays and pauses bound media.
7. MediaBound to an audio or video element it follows timeupdate, play, pause, seeked and ratechange, and scrubbing sets currentTime.
8. Read-onlyValues from code only; the hand does nothing and aria-readonly says so.
9. Smoke and clearEverything inside shows through: the packs, the tape path round the corner rollers, the pressure pad; the hub bores and the holes show the page.
10. Black and whiteAn opaque shell, clear only in a wide window across both hubs.
11. Paper labelA paper label with a stadium cut-out round the window, the title and note printed on it.
12. Off screen or hiddenThe loop pauses; off screen the packs land on the value; a returning tab advances one clamped frame.
13. Reduced motionThe packs jump to the value and the hubs stand still; no frame is requested.

Made of: Conserved tape area, Tape driven hubs, Solved tape path, Hub locked scrub, Anisotropic bow tie sheen, Room fixed sheen, Embossed clear moulding, True printed scale, Media binding, Sleeping loop, Fit to host.

Original. Canvas 2D, drawn in millimetres. The far half, the near half, a hub, the hub's fixed sheen and a full pack are baked once per size and style; a frame is the far half, two pack shadows, the solved tape path, two packs clipped to their annuli, two turned hubs with unturned sheen, and the near half. The Walkman (spring door, latching keys) is the next piece built on it.

• 12.1Pocket PlayerA pocket cassette player for your recordings.