This repository contains a lightweight Spotify-inspired web player built with HTML, CSS and JavaScript. It is a local, client-side project intended to demonstrate interactive audio playback, playlist grouping, a responsive player UI, and basic playback controls.
The app organizes songs into folders (moods/artists) — each folder includes an info.json and audio files. Clicking a folder loads its playlist and allows users to play, pause, skip, seek, and adjust volume. The UI includes a progress/seek bar and controls for next/previous track.
- Professional: Clean, responsive player UI with album/folder-driven playlists.
- Playback controls: Play/Pause, Next, Previous, Seek (progress bar), and Volume control.
- Organized content: Songs grouped into folders (e.g.,
Chill_(mood),Love_(mood),Kishore Kumar). - Metadata support: Each folder contains an
info.jsonused to load track metadata. - Static, client-side: No backend required — open
index.htmlin a browser.
- Clone or download the repository.
- Open
[index.html](index.html)in your browser. - Click any folder card to load its playlist.
- Use the player controls to play, pause, skip, seek, and change volume.
index.html— main entry and UI markup.style.css,utility.css— styling and utility classes.script.js— player logic, event handlers, and audio management.images/— screenshots and artwork used in the UI.songs/— folder of categorized song directories; each directory contains aninfo.jsonand audio files.
Below are the screenshots you added — retained in their original order to preserve your examples of the UI:
- HTML5, CSS3
- Vanilla JavaScript (ES6+)
If you'd like to improve this project, consider:
- Adding more metadata to each
info.json(artist, album art, duration). - Improving accessibility (keyboard controls, ARIA labels).
- Adding playlist persistence (localStorage) or a simple backend for streaming.