Music Toggle

A play/pause control shaped like a spinning record, with a live waveform and a seekable progress ring.

Installation

npx smoothui-cli add music-toggle

Features

Play/pause control shaped like a spinning record with a live waveform and seekable progress ring. Caller-driven or self-contained with an optional <audio> element.

Modes

Player

Full player with title, artist, seek ring, and waveform. Pass playing, onPlayingChange, progress, and onSeek — or supply src and let the component own playback.

Caller-driven

Purely visual when you drive playing yourself — no <audio> element. Useful for previews and design systems where audio would be hostile.

Accessibility

Keyboard Interactions

ARIA Attributes

Screen Reader

• The play/pause button is a real <button>, so it is announced with its role, pressed state and label out of the box.
• The waveform bars are aria-hidden; they carry no information not already exposed by the play/pause state.
• The seek ring is only focusable (tabIndex={0}) when onSeek is supplied — otherwise it is skipped by keyboard navigation.

Reduced Motion

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the cover art stops rotating, the waveform bars stop animating, and the play/pause icon swaps instantly instead of morphing.

Props