Music Player Card — Interactive music player, fully custom

About this component

Music Player Card is an interactive component that turns any audio content into an elegant, visually engaging experience. You can connect images or videos as the cover, display the title and artist, and play audio files directly within the component. Designed for portfolios, landing pages, playlists, or editorial layouts, it gives you full control over design and interactivity while remaining fully responsive and no-code.

Properties

/ Media

• Cover Media (Image/Video)

• Image Source (File/URL)

• Title

• Artist

• Audio Source (File/URL)

• Audio URL (Direct audio URL: .mp3, .wav)

/ Layout & Style

• Corner Radius

• Border

• Shadow

• Padding

/ Colors

• Title Color

• Text Color

• Time/Volume Bar FG

• Time/Volume Bar BG

• Icon Color

• Mute Button Fill

/ Controls

• Play/Pause Size

• Skip Icon Size

• Volume Control (Show / Hide)

• Volume Icon Size

/ Typography

• Title Font

• Artist Font

• Time Font

Use Cases

Music portfolios · Landing pages · Interactive playlists · Editorial layouts