Music Album

✨ Overview

Music Album is a modern, customizable music player component built for Framer, designed to bring dynamic audio experiences directly into your designs.It’s perfect for interactive portfolios, artist showcases, digital albums, or app mockups where you want a functional, responsive player that feels premium.

This component combines elegant design with complete flexibility—offering responsive layouts, audio integration, and deep customization directly through property controls.

🧩 Key Features

🎨 1. Responsive Layouts

• Automatically adjusts between vertical (mobile-first, compact with hamburger toggle) and horizontal (desktop/tablet, full layout with playlist visible) designs.

• Optimized for all screen sizes with fluid resizing and alignment.

🖼️ 2. Album Artwork Display

• Displays large, prominent album art for the current playing track.

• Includes image filter effects with adjustable intensity:

  • Grayscale

  • Sepia

  • Contrast

  • Saturate

  • Blur

• Each filter includes a slider to fine-tune visual intensity.

🎵 3. Track & Artist Fields

• Each playlist item includes editable song title and artist name fields.

• Update these directly from the Framer property panel for live preview and design consistency.

📁 4. Audio File Upload

• Upload MP3 or WAV audio files per track.

• The component automatically detects duration and waveform data — no need for manual input.

🎧 5. Playlist / Queue

• A scrollable playlist panel supports up to 15 tracks.

• In vertical mode, toggle the queue via a hamburger or close (“X”) icon.

• In horizontal mode, the queue remains visible for seamless navigation.

• Each track highlights when active or hovered, matching your chosen accent color.

⏯️ 6. Playback Controls

• Includes Play/Pause, Next, and Previous buttons.

• Keyboard shortcuts:

  • Spacebar → Play / Pause

  • ← / → → Skip tracks

• Smooth transitions between songs with visual feedback on state change.

📊 7. Interactive Progress Bar

• Displays elapsed and total duration, dynamically updated from your audio file.

• Draggable seek bar to skip through the track manually.

• Automatically syncs with the uploaded audio metadata.

🎨 8. Customizable Design

Every design detail can be customized in the property panel:

• Accent Color — highlight and button color

• Background Color — main player background

• Text Color — applies globally to all text

• Font Controls — family, weight, size, and letter spacing

• Padding, Gap, and Border Radius — control spacing and rounding

♿ 9. Accessibility Built-In

• ARIA labels on all controls

• Semantic HTML structure for assistive technology

• Visible focus states and readable text ensure inclusivity

🧭 10. Queue Toggle & Layout Behavior

• Vertical layout: queue hidden behind a toggle icon for compact design.

• Horizontal layout: queue always visible; both player and list are center-aligned.

• Smooth transitions between layouts to maintain flow.

🧠 Behavior Summary

• Each connected track fills the player’s content area with full cover art.

• Audio playback updates progress, duration, and highlight state in real-time.

• The playlist can be navigated via clicks, buttons, or keyboard shortcuts.

• All visual changes are immediate in Framer’s preview mode.