🎵 Spotify Clone

A front-end web application that replicates the user interface and basic functionality of the Spotify web player. This project is built with pure HTML, CSS, and JavaScript, focusing on DOM manipulation and creating an interactive music playback experience.

Live Demo Link

✨ Features

• Music Playback: Play and pause songs with a clean, modern player interface.

• Dynamic Song Library: Automatically loads and displays a list of songs from a designated folder.

• Interactive Play Bar: Features a functional seek bar to navigate through the current track, along with previous and next buttons.

• Responsive Design: A user-friendly layout that adapts to different screen sizes, with a mobile-friendly fixed play bar.

• UI Replica: A faithful clone of the Spotify desktop web player's look and feel, including cards, buttons, and layout structure.

🛠️ Tech Stack

This project was built using fundamental front-end technologies:

• HTML5: For the structure and content of the application.

• CSS3: For styling, layout (Flexbox), and responsiveness.

• JavaScript (ES6+): For all the interactive logic, including audio playback, fetching songs, and manipulating the DOM.

🚀 Getting Started

To run this project on your local machine, you have two options:

Method 1: The Simple Way (Static Version)

This method works if you have manually listed your songs in the script.js file.

1. Bashgit clone https://github.com/ankitdoi-coder/Spotify-Clone

2. Bashcd your-repository-name

3. Open the index.html file directly in your web browser.

Method 2: The Dynamic Way (with a Server)

This method is for the version of the code that uses fetch() to dynamically load songs from a folder.

1. Clone the repository.

2. Open the project folder in VS Code.

3. Install the Live Server extension from the VS Code Marketplace.

4. Right-click on index.html and select "Open with Live Server". This will start a local server and open the project in your browser.

📂 Project Structure

spotify-clone/
├── img/                # Contains all images and SVG icons
├── songs/              # Contains all the MP3 song files
├── index.html          # Main HTML structure
├── style.css           # Primary styling for the application
├── utility.css         # Helper CSS classes for layout
├── script.js           # Core JavaScript for functionality
└── README.md           # You are here!