---
title: "Music Album Player — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Nabeel · Players. About The Album Player is a fully functional music album player component for Framer that allows users to play, pause, and navigate…"
canonical: "https://framer.elliotli.dev/component/music-album-player"
---

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

# Music Album Player

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

![Music Album Player preview image 1](https://framer.elliotli.dev/og/component/music-album-player/08d14d599a023f37/1600x1200.jpg)

## Summary

About The Album Player is a fully functional music album player component for Framer that allows users to play, pause, and navigate through a playlist of songs.

## Description

## About

The Album Player is a fully functional music album player component for Framer that allows users to play, pause, and navigate through a playlist of songs. It features a sleek interface with album artwork, progress bar, playback controls, and a queue list of upcoming songs. All fully customizable.

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click [here](https://segmentui.com/uikit) to see the full library

## Instructions

1.  Copy paste the component to your file
    
2.  Configure your track list by uploading MP3 files and filling in the song details in the Property Controls panel
    
3.  Customize the appearance by adjusting the Property Controls to match your design needs
    
4.  Publish & preview
    

## How It Works

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ycagq8v0-40Dpq25Gwe8kABhQ8hgOxChnurn24H)

In the Property Controls, you'll need to configure:

-   Playlist: Add songs with title, artist, cover art, and audio URL
    
-   Layout: Choose between vertical or horizontal orientation
    
-   Colors: Customize the player's color scheme
    
-   Typography: Set font styles for different text elements
    
-   Spacing: Adjust gaps between elements
    
-   Padding: Configure container and element padding
    
-   Borders: Set border radius for various elementsSupport
    

For any queries and help setting up the component, contact [hello@segmentui.com](mailto:hello@segmentui.com)

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

-   All · #7839

## Details

- **Author**: Nabeel
- **Price**: $14.00
- **Published**: 2025-09-01
- **Updated**: 2025-08-29
- **Added**: 2025-08-18
- **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.