🎵 Spotify Clone – Web Music Player

A responsive Spotify-style web music player built using HTML, CSS, and JavaScript.
This project dynamically loads albums and songs either from a local server or a Cloudflare Worker API, allowing users to play, pause, seek, and adjust volume — all in a sleek, modern interface inspired by Spotify.

---

🚀 Features

✅ Dynamic Music Loading
Fetches songs and album info directly from local directories or via a worker endpoint.

✅ Play / Pause / Next / Previous Controls
Full playback control with smooth transitions and time tracking.

✅ Seekbar & Progress Tracking
Users can click the seekbar to jump to any part of the song.

✅ Volume Control & Mute Toggle
Integrated volume slider and mute/unmute button.

✅ Responsive UI
Works seamlessly on desktop, tablet, and mobile devices.

✅ Dynamic Albums Display
Each album is generated from a folder containing songs, a cover image, and an info.json file (with title & description).

✅ Cloudflare Worker Support (Optional)
Play songs hosted remotely by connecting your Worker endpoint via the WORKER_URL variable.

---

🧩 Folder Structure

🎵 Project Structure

📁 project-root
┣ 📂 css
┃ ┣ 📄 style.css          # Main styles
┃ ┗ 📄 utility.css        # Utility classes and helper styles
┣ 📂 js
┃ ┣ 📄 script1.js         # Uses Cloudflare Worker endpoint (WORKER_URL)
┃ ┗ 📄 script2.js         # Uses local server (http://localhost:5500)
┣ 📂 img                  # All icons and image assets
┣ 📂 songs                # Albums directory
┃ ┣ 📂 <album-name>       # Each album folder
┃ ┃ ┣ 🎵 <song-files>     # Individual song files
┃ ┃ ┣ 🖼️ cover.jpeg       # Album cover
┃ ┃ ┗ 📄 info.json        # Album metadata
┣ 📄 index.html           # Main entry point
┗ 📄 README.md            # Project documentation

---

⚙️ How It Works

• script1.js — Connects to a Cloudflare Worker API
  → Fetches album & song data from the worker link you provide in WORKER_URL.

• script2.js — Works with a Local Server
  → Scans directories like /songs/album-name to list and play songs.

• Each album folder should contain:

  • cover.jpeg → Album cover
  • info.json → Album info
  • .mp3 files → Songs

Example info.json:

{
  "title": "Chill Vibes",
  "discription": "Relax and enjoy smooth chill beats."
}

💻 Setup & Usage

▶️ Run Locally

1. Clone this repository:

git clone https://github.com/yourusername/spotify-music-player.git

2. Start a local server (e.g., with VSCode’s Live Server or Python):

npx serve

or

python -m http.server 5500

3. Open your browser and go to: http://localhost:5500/

4. Add your songs and albums inside the /songs folder.

☁️ Connect to Cloudflare Worker (Optional)

If you want to stream songs from a remote server:

1. Deploy a Worker API that returns:

• /api/albums

• /api/songs/{album} and serves song files from /songs/{album}/.

2. In script1.js, set:

const WORKER_URL = "https://your-worker-link.workers.dev";

3. Run the web app normally — your music will load remotely.

🛠 Technologies Used

• HTML5

• CSS3 (Responsive Design)

• JavaScript (ES6)

• Cloudflare Workers (optional for remote hosting)

📜 License

• This project is open-source under the MIT License.
• You are free to use, modify, and distribute it.

👨‍💻 Author

• Made by : MS Coder with 💓
• 💬 Front-End Developer & JavaScript Enthusiast
• 📧 [ms.coder.py@gmail.com]
• 🌐 [https://ms-coder-project.netlify.app/]

⭐ If you like this project, don’t forget to star the repository!