A minimalistic, responsive web-based music player that streams songs directly from your local folders. Designed with a user interface inspired by Spotify, this project allows you to organize your local music library into albums and listen to them on both desktop and mobile devices.
- Dynamic Library Parsing: Automatically detects any number of subfolders (Albums) within the main songs directory and lists the audio files inside them.
- Spotify-Inspired UI: A clean, dark-themed interface with a sidebar and main content area.
- Full Playback Control:
- Play/Pause toggle.
- Interactive Seekbar to skip through songs.
- Volume Rocker for audio adjustment.
- Next/Previous track functionality.
- Responsive Design:
- Desktop: Full sidebar and player view.
- Mobile: Collapsible Hamburger menu and optimized touch controls.
- Local Server: Runs on your local machine using your file system as the database.
- HTML5 - Structure and layout.
- CSS3 - Flexbox/Grid, Media Queries, and Spotify-themed styling.
- JavaScript (Vanilla) - Audio
new Audio()API, DOM manipulation, and event listeners.
Ensure your project is structured exactly like this so the script can find your music:
/Local-Spotify-Player
├── index.html
├── style.css
├── script.js
├── README.md
├── .gitignore <-- See 'Installation' below
└── songs/ <-- Create this folder manually
├── Rock Classics/
│ ├── song1.mp3
│ └── song2.mp3
├── Pop Hits/
│ ├── track1.mp3
│ └── track2.mp3
└── ...
⚙️ Installation & Setup
1. Clone the Repository
git clone [https://github.com/your-username/local-spotify-player.git](https://github.com/your-username/local-spotify-player.git)
cd local-spotify-player<br>
2. Add Your Music
Create a folder named songs in the root directory.
Inside songs, create subfolders for your albums (e.g., songs/MyAlbum).
Paste your .mp3 files into those album folders.
3. Configure Git (Important)
To prevent your music files from being uploaded to GitHub (which violates copyright and bloats the repo), you must ignore the songs folder.
Create a file named .gitignore in the root directory.
Add the following line to it:
songs/
🚀 How to Run
Due to browser security policies (CORS), this project cannot run by simply opening index.html. You must use a local server.
Option A: VS Code Live Server (Recommended)
Open the project in VS Code.
Install the Live Server extension.
Right-click index.html and select "Open with Live Server".