🎵 Mini Player

A modern, sleek, and fully responsive web-based music player built with HTML5, CSS3, and Vue.js. Featuring smooth transitions, dynamic artwork scaling, interactive progress bar seeking, and a clean minimalist aesthetic.

---

✨ Features

• 🎧 High Quality Audio Playback: Smooth, uninterrupted local audio playback powered by the HTML5 Audio API.
• 📱 Fully Responsive: Flawlessly adapts to all screen sizes, from mobile phones to high-resolution desktop screens.
• 🎨 Modern Minimalist UI: Beautiful soft neomorphic & glassmorphic depth effects with custom shadows and gradients.
• ⏯️ Intuitive Controls:
  • Play / Pause with dynamic icon states.
  • Previous / Next track navigation with directional scale transitions.
  • Favorite (Heart) toggle with active state styling.
• ⏳ Real-time Seekable Progress Bar: Click or touch anywhere on the progress bar to instantly seek to that point in the track with real-time duration and elapsed time counters.
• 🖼️ Dynamic Cover Art: Animated cover transitions and ambient colored drop-shadows tailored to each track.

---

🚀 Demo & Screenshots

Desktop View	Mobile View
Centered floating player card with offset artwork and control column	Vertical compact layout with full-width responsive controls

---

🛠️ Tech Stack

• Markup: HTML5, SVG Icons
• Styles: Vanilla CSS3 (Custom properties, Flexbox, Keyframes, Media Queries)
• Logic / State: Vue.js 2
• Audio Engine: Native HTML5 Audio() API

---

📁 Project Structure

mini-player/
│
├── css/
│   ├── main.css           # Core styling & responsive media queries
│   └── main.scss          # SCSS source styles
│
├── img/                   # Track cover art & backgrounds (.jpg, .svg, .png)
│   ├── 1.jpg ... 21.jpg
│   └── icons.svg
│
├── mp3/                   # Audio files (.mp3)
│   ├── 1.mp3 ... 18.mp3
│
├── scripts/
│   └── script.js          # Vue.js player instance & audio logic
│
├── index.html             # Main entry file
└── README.md              # Project documentation

---

⚡ Quick Start / Local Setup

Option 1: Open Directly in Browser

Simply double-click or open index.html in any modern web browser (Chrome, Firefox, Edge, Safari).

Option 2: Run with a Local Server

Using Node.js / npx:

# Using serve
npx serve .

# Or using http-server
npx http-server . -p 8080

Then visit http://localhost:8080 or the URL printed in your terminal.

---

🎶 How to Add Your Own Songs

1. Add your .mp3 audio files into the mp3/ directory (e.g. 18.mp3).
2. Add your matching album cover image into the img/ directory (e.g. 18.jpg).
3. Open scripts/script.js and add a new entry to the tracks array:

{
  name: "Your Song Name",
  artist: "Artist Name",
  cover: "./img/18.jpg",
  source: "./mp3/18.mp3",
  favorited: false
}

---

📜 License

This project is open source and available under the MIT License.