# NeumorphPlayer 🎵

Website pemutar musik modern dengan desain **UI Neumorphism** yang elegan dan responsif.

## Struktur Proyek

```
music-player/
├── index.html          ← Halaman utama
├── style.css           ← Seluruh gaya visual (Neumorphism)
├── script.js           ← Logika JavaScript + localStorage
└── assets/
    ├── images/         ← Gambar cover album (opsional)
    └── music/          ← File audio MP3
        ├── song1.mp3
        ├── song2.mp3
        ├── ... dst
        └── song8.mp3
```

## Cara Menambahkan Lagu

### 1. Tambahkan File Audio
Salin file MP3 Anda ke folder `assets/music/` dengan nama:
- `song1.mp3`, `song2.mp3`, ... `song8.mp3`

Atau edit array `DEFAULT_PLAYLIST` di `script.js` untuk menyesuaikan nama file.

### 2. Edit Playlist di script.js
Buka `script.js` dan temukan `DEFAULT_PLAYLIST`. Ubah data sesuai lagu Anda:

```javascript
const DEFAULT_PLAYLIST = [
  {
    id: 1,
    title: "Nama Lagu Anda",
    artist: "Nama Artis",
    album: "Nama Album",
    genre: "Genre",
    duration: "3:30",       // Durasi tampilan
    durationSec: 210,       // Durasi dalam detik
    src: "assets/music/song1.mp3",
    image: "",              // Kosong = pakai warna gradient
    color1: "#7c5cbf",      // Warna gradient 1
    color2: "#e44d7b"       // Warna gradient 2
  },
  // ... tambahkan lebih banyak lagu
];
```

### 3. Tambahkan Gambar Cover (Opsional)
Salin gambar ke `assets/images/` lalu isi field `image`:
```javascript
image: "assets/images/album1.jpg"
```

## Fitur

| Fitur | Keterangan |
|-------|------------|
| ▶️ Play / Pause | Tombol putar dan jeda |
| ⏭️ Next / Prev | Navigasi lagu |
| 🔀 Shuffle | Mode putar acak |
| 🔁 Repeat | Ulangi satu / semua / tidak |
| 📊 Progress Bar | Bisa diklik dan digeser |
| 🔊 Volume | Pengatur volume + mute |
| 🌙 Dark Mode | Toggle tema gelap/terang |
| ❤️ Like | Tandai lagu favorit |
| 🔍 Search | Cari lagu di playlist |
| 💾 LocalStorage | Playlist tersimpan otomatis |
| ⌨️ Keyboard | Shortcut keyboard lengkap |

## Keyboard Shortcut

| Tombol | Fungsi |
|--------|--------|
| `Space` | Play / Pause |
| `→` | Lagu berikutnya |
| `←` | Lagu sebelumnya |
| `↑` | Volume naik |
| `↓` | Volume turun |
| `M` | Mute / Unmute |
| `S` | Toggle Shuffle |
| `R` | Toggle Repeat |
| `L` | Like / Unlike |

## Deploy ke Hosting

Unggah seluruh folder `music-player/` ke `public_html/` di hosting Anda.
Tidak memerlukan database atau konfigurasi server tambahan.

## Kompatibilitas Browser

- Chrome 90+ ✅
- Firefox 88+ ✅
- Safari 14+ ✅
- Edge 90+ ✅
- Mobile (iOS & Android) ✅
