A lightweight Spotify clone built using HTML, CSS, and JavaScript. This project dynamically fetches and displays music content (by genre, artist, mood, or album) using a folder-based structure and JSON metadata — all without any frameworks.
/Spotify-clone
│
├── /Icons # SVGs and UI icons
├── /Songs # Music organized in subfolders (one per album/genre)
│ └── / # Contains cover.jpeg, info.json, and audio files
│
├── /Css
│ ├── style.css # Main styles
│ └── utility.css # Reusable utility classes
│
├── index.html # Entry point of the app
├── script.js # Handles dynamic loading and interaction
├── favicon.ico # Tab icon
- 🎧 Dynamic song cards generated from folders in the
Songs/directory - 🖼️ Displays album/playlist cover and metadata via
info.json - 📂 Clicking a card loads all songs in that folder into the player area
- 📱 Responsive UI
- 🚀 Pure HTML, CSS & JavaScript — no external libraries
-
Clone the repository:
git clone https://github.com/mr-abdul-razzaq/Spotify-Clone.git
cd spotify-clone -
Open index.html in your browser:
Use a Live Server extension (in VS Code)
Or just double-click the index.html file -
To add music:
Create a new folder in /Songs
Add:
folder name : album/genre/artist name..etc
cover.jpeg – cover image for the card
info.json – metadata with "title" and "decrip"
Add all Your .mp3 files
Example info.json:
{
"title": "Chill Vibes",
"decrip": "Relaxing beats to ease your day."
}
🧑💻 Author : Mohammed Abdul Razzaq