---
title: "Vinyl Player — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Soyeb · Players. Vinyl Player is an interactive vinyl record player component that blends retro charm with modern design."
canonical: "https://framer.elliotli.dev/component/vinyl-player"
---

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

# Vinyl Player

Play vinyl-style audio on your site 🎶

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

![Vinyl Player preview image 1](https://framer.elliotli.dev/og/component/vinyl-player/0d697571b1a931b1/1600x1200.jpg)

## Summary

Vinyl Player is an interactive vinyl record player component that blends retro charm with modern design.

## Description

**Vinyl Player** is an interactive **vinyl record player** component that blends retro charm with modern design. Built as a versatile **music player component** for Framer, it allows you to upload tracks, showcase **album cover** artwork, and enjoy authentic **vinyl animation** with smooth rotation. Whether you’re designing a **music interface**, creating a **podcast player**, or building a **vintage music** showcase, this **audio component** delivers style and functionality in one.

## Instructions

1.  Copy and paste the component into your project file.
    
2.  Upload your audio file using the **Add Song** property control - supports WAV, MP3, and more.
    
3.  Customize the song name and creator information through the text input fields, turning it into a complete **song player** or **track player**.
    
4.  Set your **album cover** image with the “Cover Image” control.
    
5.  Adjust play button, text colors, typography and layout to match your theme.
    
6.  Position and scale the player using Framer’s responsive layout controls.
    

## How It Works

The **record player** component features 6 main property controls:

-   **Add Song**: File picker for uploading audio.
    
-   **Song Name**: Text field for track title display.
    
-   **Creator Name**: Text field for artist/creator info.
    
-   **Cover Image**: Image picker for **album cover** artwork.
    
-   **Disk Logo:** Image picker to change CD Logo.
    
-   **Play Circle**: Color picker for play/pause button styling.
    
-   **Song/Creator Colors**: Custom controls for text styling.
    
-   **Song/Creator Size**: Custom controls for text font size.
    
-   **Song - Creator Gap:** Custom controls for adjusting gap between song name and creator name.
    
-   **Image - Text Gap:** Custom controls for adjusting gap between Album Image and Text Content.
    

## Properties Control Panel

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-qe4y4w5c-zvB9qlsJTCvW74XAHHWnwqjUzyzVZv)

## Main Features

-   **Fully Responsive**: Works seamlessly on all devices and screen sizes.
    
-   **Audio Integration**: Native HTML5 **audio player** with file upload.
    
-   **Interactive Controls**: Smooth play/pause toggle with real-time feedback.
    
-   **Vinyl Animation**: Authentic spinning **record player** effect while music plays.
    
-   **Customizable Design**: Personalize typography, colors, and artwork for unique **music cards**.
    
-   **Touch-Friendly**: Optimized for mobile taps and gestures.
    
-   **Real-Time Preview**: Live editing inside Framer with instant **music visualization**.
    
-   **Production Ready**: Clean structure, reliable playback, and proper error handling.
    

## Use Cases

-   **Music website** and streaming **player** interfaces.
    
-   Artist portfolios or promotional pages featuring a **retro player** design.
    
-   **Podcast player** for shows, interviews, or learning platforms.
    
-   **Vintage music** projects or nostalgia-inspired websites.
    
-   Blog headers and **music card** highlights for editorial use.
    
-   DJ/producer showcase sites with interactive **audio controls**.
    
-   Brand storytelling with **interactive music** and sound-driven engagement.
    

**Made with ❤️ by** [**Soyeb**](https://framer.link/market)

Have questions or need a custom Framer component? Reach out at [heysoyebali@gmail.com](mailto:heysoyebali@gmail.com)

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

-   All · #3354

## Details

- **Author**: Soyeb
- **Price**: $12.00
- **Published**: 2025-09-17
- **Updated**: 2026-05-25
- **Added**: 2025-09-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.