Vinyl Player
Interactive vinyl music player with album artwork, play/pause controls, & authentic vinyl rotation animation. Responsive design for modern music interfaces.
Make it with Workshop
Build your own component with AI
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
Copy and paste the component into your project file.
Upload your audio file using the Add Song property control - supports WAV, MP3, and more.
Customize the song name and creator information through the text input fields, turning it into a complete song player or track player.
Set your album cover image with the “Cover Image” control.
Adjust play button, text colors, typography and layout to match your theme.
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
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 Nitso
Have questions or need a custom Framer component? Reach out at creator.nitso@gmail.com
