A pixel-accurate Spotify UI clone with fully working music playback — multiple mood-based playlists, play/pause, next/previous, seekbar drag, and real-time progress — built entirely in vanilla JavaScript with zero frameworks or libraries.
| Feature | Description |
|---|---|
| Toggle music playback with icon switching | |
| ⏭️ Next / Previous | Navigate between tracks in current playlist |
| 🎵 Seekbar | Click anywhere on seekbar to jump to that position |
| 🖱️ Drag Seekbar | Drag the circle on seekbar to scrub through song |
| ⏱️ Live Time Display | Shows current time and total duration in real time |
| 📚 Your Library | Sidebar showing all songs in current playlist |
| 🎨 Mood Playlists | Multiple playlist cards — Angry, Chill, Dark, Love, NCS and more |
| 📱 Fully Responsive | Hamburger menu slides in sidebar on mobile |
| 🌙 Dark Theme | Spotify's signature dark UI recreated accurately |
| 📄 JSON Based | Each playlist reads from its own info.json file |
No frameworks ✅
No libraries ✅
No React ✅
Pure vanilla JS ✅
HTML5 Audio API ✅
Each playlist folder contains:
songs/
├── ncs/
│ ├── info.json ← playlist metadata
│ ├── cover.jpg ← playlist cover image
│ └── song1.mp3 ← audio files
├── Angry_(mood)/
│ ├── info.json
│ ├── cover.jpg
│ └── song1.mp3
├── Chill_(mood)/
├── Dark_(mood)/
├── Love_(mood)/
├── Bright_(mood)/
├── Funky_(mood)/
├── Uplifting_(mood)/
├── Diljit/
├── karan aujla/
├── cs/
└── Get up/
{
"title": "Morning Melodies",
"description": "Start Your Day Right",
"songs": [
"songs/ncs/song1.mp3",
"songs/ncs/song2.mp3"
]
}const currentsong = new Audio()
// Load and play a track
currentsong.src = `${currfolder}` + track + ".mp3"
currentsong.play()
// Track real time progress
currentsong.addEventListener("timeupdate", () => {
document.querySelector(".songtime").innerHTML =
`${secondsToMinutesSeconds(currentsong.currentTime)}
: ${secondsToMinutesSeconds(currentsong.duration)}`
// Move seekbar circle
document.querySelector(".circle").style.left =
(currentsong.currentTime / currentsong.duration) * 100 + "%"
})async function getsongs(folder) {
let infoFetch = await fetch(`${folder}info.json`)
let info = await infoFetch.json()
return info.songs || []
}async function displayalbums() {
for (const folder of folderNames) {
let info = await fetch(`./songs/${folder}/info.json`)
// Creates card with title, description and cover image
// Adds click listener to load that playlist
}
}seekbar.addEventListener("click", (e) => {
let percent = (e.offsetX / seekbar.getBoundingClientRect().width) * 100
circle.style.left = percent + "%"
currentsong.currentTime = (percent / 100) * currentsong.duration
})// Mouse down → start dragging
circle.addEventListener("mousedown", () => { isDragging = true })
// Mouse move → update position while dragging
document.addEventListener("mousemove", (e) => {
if (isDragging) {
let offsetX = e.clientX - seekbar.getBoundingClientRect().left
let percent = (offsetX / seekbar.getBoundingClientRect().width) * 100
circle.style.left = percent + "%"
currentsong.currentTime = (percent / 100) * currentsong.duration
}
})
// Mouse up → stop dragging
document.addEventListener("mouseup", () => { isDragging = false })next.addEventListener("click", () => {
let index = songs.indexOf(currentsong.src.split("/").pop())
if (index + 1 < songs.length) {
playmusic(songs[index + 1].split("/").pop().replace(".mp3", ""))
}
})document.querySelector(".hamburger").addEventListener("click", () => {
document.querySelector(".left").style.left = 0 // slide in
})
document.querySelector(".closebutton").addEventListener("click", () => {
document.querySelector(".left").style.left = "-120%" // slide out
})Desktop → Sidebar always visible
Multi-column playlist grid
Full player controls
Mobile → Hamburger menu (☰)
Sidebar slides in from left
Single column layout
Compact bottom player
git clone https://github.com/MRSE435/Spotifyclone
cd SpotifycloneCreate a folder inside songs/
Add your .mp3 files
Create info.json with title, description, songs array
Add cover.jpg
Add folder name to folderNames array in script.js
# Open index.html directly in browser
# OR use Live Server in VS Code
# No backend needed ✅Spotifyclone/
├── index.html ← main HTML structure
├── style.css ← all styling + responsive design
├── script.js ← all music logic + DOM manipulation
├── images/ ← UI icons (play, pause, next, prev)
│ ├── play.svg
│ ├── pause.svg
│ ├── playbutton.svg
│ └── music.svg
└── songs/ ← all playlist folders
├── ncs/
│ ├── info.json
│ ├── cover.jpg
│ └── *.mp3
└── .../
✅ HTML5 Audio API — play, pause, timeupdate, currentTime
✅ Fetch API — loading JSON data dynamically
✅ DOM manipulation — creating elements dynamically
✅ Event driven programming — click, mousedown, mousemove, mouseup
✅ Drag implementation — isDragging pattern with mouse events
✅ CSS Flexbox — complex sidebar + main layout
✅ Media queries — mobile responsive hamburger menu
✅ Async/Await — fetching playlist data
✅ Array methods — indexOf for next/previous logic
