Music Player
The Music Player preset delivers an embedded audio playback interface with controls for play, pause, skip, and volume. Tailored for media-centric applications, it ensures accessibility and responsive interaction patterns.
Quick Links
Installation
Install the presets individually or as part of the complete @aristobyte-ui library.
Installation of Music Player
Install the Music Player preset individually. This step can be skipped if @aristobyte-ui is already available globally.
Package Manager
Individual Package
Install only the presets if you need specific functionality.
Full Library
Skip this if you have the complete @aristobyte-ui already installed.
Import
Choose between individual package imports or global library imports based on your project's needs and bundle size requirements.
Import Music Player
Bring the Music Player component into your project to offer users direct control over audio content. The preset ships with adaptive styling for mobile and desktop breakpoints.
Import Method
Individual Package
Import directly from the presets package for optimal tree-shaking and smaller bundle sizes.
Recommended for component-specific usage
Global Library
Import from the main library package when using multiple components from AristoByte UI.
Recommended for component-specific usage
Basic Usage Example
Basic implementation of the component using default properties. Suitable for general-purpose interactions.
Disabled
Shows the Music Player when playback controls are disabled — e.g., due to lack of license, offline state, or missing media — preventing playback interactions.
Preview
Guidelines
Disable controls when DRM/licensing checks fail or content is region-restricted.
Disable playback during network offline states or when required assets are unavailable.
Lock skip/repeat controls when a playlist is being re-ordered or persisted to avoid state race conditions.
Disable advanced features (equalizer, effects) when device capabilities don't support them.
Playback Constraints
Provide clear fallback messaging (e.g., Offline — Playback unavailable) when disabled.
Ensure keyboard focus does not get trapped on disabled controls but remains discoverable for status announcements.
Expose programmatic flags for remote orchestration (e.g., telemetry that indicates why playback is disabled).
Design visual hierarchy so disabled player still surfaces critical metadata (track title, progress) for user context.
Accessibility & Resilience
Props Reference
Complete reference for all props available on MusicPlayer component(s), including type definitions, default values, and usage examples.
MusicPlayer
Core Props
children
React.ReactNode | stringdefault: ''