A simplified Spotify Web Player UI Clone built with pure HTML, CSS, and a single internal JavaScript function to play/pause one demo song. This project focuses on replicating Spotify's interface while keeping the functionality minimal and clean.
- 🎧 Spotify-inspired modern UI
- 🔊 Music player with play/pause toggle
- 🖱️ Interactive progress bar and seek functionality
- 🎨 Fully responsive design using pure CSS
- 📁 Organized layout: sidebar, content area, footer music player
- ✅ No external frameworks – only HTML, CSS, and a small JS block
spotify-clone/
├── index.html # Main HTML file
├── style.css # Styling using pure CSS
├── assets/ # All images, icons, audio & pause icon
└── README.md # Project documentation
- HTML5 – Markup structure
- CSS3 – Styling and layout
- Vanilla JavaScript – One internal function for audio control
-
Clone this repository:
git clone https://github.com/codewithshek/Spotify-Clone.git
-
Navigate to the project folder:
cd Spotify-Clone -
Open
index.htmlin any browser.
No installation or server required.
- ✔️ One playable song (Finding Her) using the
<audio>tag - ✔️
togglePlay()function allows play/pause of the audio - ✔️ Progress bar tracks audio time and allows seeking
- ✔️ Duration and current time dynamically update
- ✔️ Volume can be controlled via a slider
- Images (album covers, icons, logos) – in
/assets/ - Audio file –
Finding Her.mp4 - Fonts – Google Fonts: Montserrat
- Icons – Font Awesome
- This is a frontend-only clone — no backend or API integrations.
- Built strictly for learning and UI prototyping purposes.
- Inspired by Spotify
- Icons provided by Font Awesome
- Font from Google Fonts - Montserrat
This project is open-source and free to use for personal and educational purposes.
D Abhishek Yadav
📍 Hyderabad, India
🧑💻 B.Tech CSE | Full-Stack Enthusiast
Made with ❤️ for Apna College Sigma 8.0 Batch CSS Major Project