Skip to content

feat(media): accessible AudioPlayer component #473

Description

@bntvllnt

Problem

The registry has no audio or media-player component, so any property with audio
content (podcasts, embedded clips) hand-rolls play/pause, scrubbing, duration,
and transcript UI — including the a11y that's easy to get wrong. Consumers import
components and override via props/className; there's nothing to import here.

Proposal

An accessible AudioPlayer: play/pause, seek/scrub, elapsed + duration
(tabular-nums), optional transcript toggle, optional playback-rate. Token-driven
colors, lucide-react icons, full keyboard support, aria-* on the scrubber,
respects prefers-reduced-motion.

Acceptance

  • Keyboard: play/pause (Space/Enter), seek ±, Home/End
  • Screen reader: labelled controls, aria-valuenow/aria-valuetext on the scrubber
  • Token-driven styling (no literal colors)
  • Works with a plain audio URL; transcript slot optional

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions