Transport

Previous, play or pause in an accent ring, next. These are the controls of anything that plays.

Part of a music window: the song Undertow in large type, the artist Mara Velde, a waveform played to a little over a third, the times 1:54 and 5:01, and below it previous, a ring with the pause symbol, and next.

Use it for one thing that plays: a song, a recording, a video. It has the three controls and nothing more. The ring is the one primary action on the page, so it is the one place the accent draws a line.

Anatomy

The transport at one and a half times its size. Callouts name the previous button, the ring, the play symbol inside it and the next button. — The transport at 1.5 times its size.

PreviousAn icon button, half the transport's size.
Play or pause symbolplay_arrow while stopped and pause while playing, half the ring's size, in the main ink.
Ring2 pixels in the accent at 80 %, as wide as size.
NextAs previous.

States

The transport five times at the small size, numbered: at rest, pointer over the ring, the ring pressed, the keyboard ring, and playing with the pause symbol. — One column for each state of the ring.

RestThe ring empty.
Pointer over itThe hover wash inside the ring.
PressedThe ring shrinks a little while held and comes back.
Keyboard focusThe ring around the ring, round.
PlayingThe pause symbol; playing is the app's to set.

A side button with nothing to go to (canPrevious or canNext false) is an icon button that is not enabled: its symbol in the faint ink, with no response and no stop for Tab.

Sizes

Two transports: one with a ring of 64 pixels, for a stage page, and one with a ring of 40, for a player bar, each ring measured above it. — The two sizes in use.

Part	At 64	At 40
Ring	64	40
Symbols	32	20
Side buttons (hit area)	51	36
Space between the three	22	14

size is the ring's width. The symbols are half of it, the space is 35 % of it, and a side button is never under 36, so it stays easy to hit.

Keys and pointer

The previous button, the ring and the next button are each a stop for Tab, except a side button that is not enabled.

Do this	To
`Enter` or `Space` on the ring	Play or pause
Click the ring	Play or pause
`Enter` or `Space` on a side button, or a click	Previous, or next

Play and pause on Space anywhere in the window belongs to the app, not to this part.

Accessibility

The row is a toolbar named by label ("Playback" unless the app says). The ring is a button named "Play" or "Pause" for what it will do; the sides are "Previous" and "Next".
The ring is shown by an accent line and by its symbol, so it does not depend on colour alone.

Writing

The transport has no words. Put the title and the artist beside or above it, and the times on a waveform or a slider.

Do and don't

A song title above a transport with one ring around the play symbol. — DoKeep one accent ring, on play and pause.

Three controls, previous, play and next, each in its own accent ring. — Don'tRing all three. The page then has three primary actions and none stands out.

Code

import Tacit.Kit

Transport {
    size: 64                               // 40 in a player bar
    playing: player.playing
    canPrevious: player.index > 0
    canNext: player.index < player.count - 1
    onPrevious: player.previous()
    onPlayPause: player.toggle()
    onNext: player.next()
}

Property	What it does
`size`	The ring's width: 64 on a stage page, 40 in a player bar
`playing`	Shows the pause symbol
`canPrevious`, `canNext`	Turn the side buttons off
`previous()`, `playPause()`, `next()`	What the person asked for
`label`	What a screen reader calls the controls ("Playback")

Experimental, in Tacit.Kit 0.1.

Text and figures: CC BY 4.0. Tacit.Kit: LGPL-3.0 code, OFL fonts. The Tacit name.