Music-App

🎵 Dynamic Music Player Web App

A fully responsive, dynamic music player web application built using modern frontend technologies. This project focuses on scalability and ease of content management, allowing albums and songs to be added dynamically with minimal effort.

📖 Project Synopsis

This music app is designed to dynamically load albums and songs without modifying the core codebase. By simply adding a new album folder containing a cover image, an `info.json` file, and audio files, the app automatically renders the album and its song list on the UI.

The project emphasizes responsiveness, modularity, and ease of expansion, making it ideal for learning dynamic DOM manipulation and asynchronous JavaScript workflows.

🛠️ Tech Stack Used

• HTML5 – Semantic structure and layout
• Tailwind CSS V4 – Utility-first styling and responsive design
• **JavaScript ** – Dynamic content loading, event handling, and logic

✨ Key Features

• 📁 Dynamic Album & Song Loading

  • Add a new album by simply creating a folder
  • Each album requires:
    • cover image
    • info.json file
    • song files inside the folder
  • No hardcoded albums or songs

• 🔄 Automatic UI Rendering

  • Albums and song lists are generated dynamically using JavaScript

• 📱 100% Responsive Design

  • Optimized for all screen sizes and aspect ratios
  • Works seamlessly across mobile, tablet, and desktop devices

• 🎧 Clean & Modern UI

  • Styled entirely with Tailwind CSS
  • Lightweight and fast-loading interface

📂 Folder Structure (Example)

songs/

├── Album_Name/

│ ├── cover.jpg

│ ├── info.json

│ ├── song1.mp3

│ ├── song2.mp3

Just add a new folder like this, and the app takes care of the rest 🚀

🖼️ Assets & Credits

• Icons & Images: hugeicons.com
• Album Covers: spotify.com
• Songs Source: pagalworld.com

⚠️ This project is created for educational purposes only.

🚀 Future Improvements

• Playlist support

• Search & filter functionality

• Backend integration

• User authentication

  Illustrations ✨

  For mobile (Having large displays) :

  
  

  For mobile (Having comparatively small displays) :

  
  

  For Tablets :

  
  

  For PC/Desktops :