Waveform Dock

Notes

Idea

A smoked glass dock for music videos where the seek bar is the soundtrack itself: bar heights are measured from the video's audio when the page is built, so loud and quiet passages are visible before you jump to them.

Accessibility

The waveform is a mask drawn over a real Video.js slider, so arrow keys, Page Up, Page Down, Home and End all seek and screen readers hear the time as the slider's value; silent stretches still draw a 4px bar so the track never disappears.

Craft

The coral play disc's centre sits exactly on the centre of the dock's corner curve, 32px in from both edges (28px on phones), so the disc is concentric with the corner, and the time uses tabular figures in a reserved width so nothing shifts as it counts.