---
title: "Music Player Card — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Francesco Caronte · Players. About this component Music Player Card is an interactive component that turns any audio content into an elegant, visually…"
canonical: "https://framer.elliotli.dev/component/music-player-card"
---

[Home](/)/[Components](/components)/[Players](/components/category/players)/Music Player Card

# Music Player Card

Interactive music player, fully custom

[View on Framer](https://framer.com/marketplace/components/music-player-card/?via=elliot-li)

![Music Player Card preview image 1](https://framer.elliotli.dev/og/component/music-player-card/e1f50529bc17ff5e/1600x1200.jpg)

## Summary

About this component Music Player Card is an interactive component that turns any audio content into an elegant, visually engaging experience.

## Description

## 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

## Rank history [How rankings work →](/terms#rankings)

-   All · #9376

## Details

- **Author**: Francesco Caronte
- **Price**: $9.00
- **Published**: 2026-02-13
- **Updated**: 2026-03-15
- **Added**: 2026-02-05
- **Categories**: Players

## More like this

-   [Cozy Video Card](/component/cozy-video-card) — 日香理 / hikari · $1 — A cozy card for your YouTube video
-   [A/B Audio Player Pro](/component/a-b-audio-player-pro) — Injamul Haque Somrat · $24 — Master Audio Comparison Player
-   [Reelflow](/component/reelflow) — Quaders · Free — An auto video ticker for reels
-   [Mux Video](/component/mux-video) — NorthGarden · $3 — Drop Mux video into any Framer site with full control over playback, UI, and interaction.