Spotify-like Music Streaming Web App

A responsive, interactive, and offline-capable Spotify-inspired music streaming web application built using HTML, CSS, and JavaScript. The app includes multiple playlists and allows smooth offline playback using locally hosted songs. Designed with a clean UI, smooth transitions, and mobile-first approach, this project recreates a realistic music player experience without relying on any external API.

Technologies Used

1. HTML5 — For page structure and layout

2. CSS3 — For styling, animations, and responsive design

3. JavaScript (ES6) — For dynamic functionality and event handling

4. DOM Manipulation — For rendering playlists and player updates dynamically

5. Event Handling — For user interaction (play/pause, volume, next, etc.)

Project Description

This project is a Spotify-like web music application developed to enhance and demonstrate front-end skills such as DOM manipulation, event-driven JavaScript, and responsive web design.

It supports:

1. Offline playback through locally hosted songs.
2. Full audio controls, including volume, loop, and next/previous.
3. A mobile-friendly design with smooth transitions and an animated hamburger menu.

Key Features

✅ Multiple playlists with individual track lists
✅ Play, Pause, Next, and Previous song controls
✅ Volume adjustment and Mute/Unmute functionality
✅ Auto-play next song after the current one ends
✅ Loop playback — restarts from the first song after the last one finishes
✅ Offline playback using locally hosted songs
✅ Fully responsive design optimized for mobile devices
✅ Interactive hamburger menu (open/close animation)
✅ Smooth UI transitions and event-driven interactions

Folder Structure

spotify-web-app/

| ├── index.html # Main HTML file
│ ├── CSS |
│ ├── style.css # Main stylesheet for layout & design |
│ └── utility.css # Reusable utility classes
│ ├── JS |
│ └── script.js # Core JavaScript logic and functionality
│ ├── songs/ │ ├── Calm-Canvas/ |
| | |--song1.mp3
| | |--song2.mp3
|-- ...

│ ├── Code-Mode/

|--song1.mp3
|--song2.mp3 |
| | |-- ...

| |
│ ├── Dreamline/
| | |--song1.mp3
| | |--song2.mp3
| | |-- ...

|── .... # Other playlists (Neon Drift, Everyday Wave, Focus Flow etc.)
│ ├── svg/ |
│ ├── play.svg
├── pause.svg
│ ├── next.svg
└── ... # Other player icons
│ └── favicon.ico # Website favicon

Responsive Design

1. Built using Flexbox and CSS Grid

2. Fully optimized for mobile, tablet, and desktop

3. Includes a hamburger menu with smooth open/close animation

Future Improvements

✨ Add playlist creation and editing functionality
✨ Implement shuffle and repeat-one modes
✨ Add lyrics synchronization
✨ Include dark/light mode toggle
✨ Integrate visual waveform animations

Acknowledgments

Inspired by the Spotify Web Player interface. Developed as a personal learning project to strengthen front-end development skills in HTML, CSS, and JavaScript.

Author

Name : Pankaj Kumar
Email : pankajkumar199922@gmail.com
GitHub : https://github.com/Pankaj2299
Linkedin : https://www.linkedin.com/in/pankaj-kumar-4b3276266

If you like this project, don't forget to star this repo!