Membangun Website Musik Otomatis Sinkron ke GitHub — Cerita Lengkapnya

 

🎧 Pembuka

Gue masih inget banget malam itu, sambil dengerin playlist lo-fi favorit, tiba-tiba kepikiran:

“Gimana kalau gue bikin website musik yang bisa update otomatis tiap kali gue nambah lagu di repo GitHub?” 🤔

Awalnya cuma ide iseng doang. Tapi semakin gue pikir, semakin menarik — karena kebetulan gue udah punya beberapa proyek Node.js, dan GitHub juga udah jadi tempat gue nyimpen banyak file musik dan script kecil.

Tujuan gue simpel: bikin website musik yang bisa update otomatis, tanpa perlu repot upload manual tiap kali ada lagu baru.
Kedengarannya ambisius, tapi gue suka tantangan. Jadi malam itu, gue buka laptop, nyeduh kopi, dan mulai ngoding. ☕

---

⚙️ Isi Cerita

Langkah pertama, gue nyiapin repo khusus di GitHub buat nyimpen semua file musik. Tiap lagu gue taruh di folder /songs, lengkap dengan metadata seperti judul, artis, dan durasi di file JSON.

Setelah itu, gue bikin struktur website-nya pakai Express.js. Gue pengen websitenya ringan tapi punya tampilan modern, jadi gue pakai kombinasi TailwindCSS buat styling dan EJS buat templating.

🛠️ Tahap Sinkronisasi GitHub

Bagian paling seru — dan paling ribet — adalah bikin sinkronisasi otomatisnya.
Gue pakai GitHub Webhook buat ngasih tahu server setiap kali ada commit baru.
Jadi kalau gue push lagu baru ke repo, server langsung nerima notifikasi, lalu jalanin script updateSongs.js yang otomatis ambil data terbaru dari repo dan nulisnya ke database lokal. 🎶

Prosesnya kira-kira kayak gini:

app.post('/github-webhook', (req, res) => {
  if (req.headers['x-github-event'] === 'push') {
    updateSongs();
    console.log("🎧 Lagu baru terdeteksi, daftar diperbarui otomatis!");
  }
  res.sendStatus(200);
});

Pas pertama kali berhasil, gue literally teriak kecil:

“YES! Berhasil juga!” 🙌

Bayangin, dari satu push di GitHub, website gue langsung update playlist tanpa gue harus login ke dashboard atau upload manual.

---

🎨 Bagian Frontend

Untuk tampilan, gue pengen pengunjung ngerasa kayak lagi dengerin musik di studio pribadi.
Jadi gue tambahin animasi waveform kecil di bawah tiap lagu, efek hover lembut, dan background gelap biar fokus ke konten. 🌙

Gue juga tambahin fitur “Now Playing” dengan JavaScript yang update real-time.
Begitu lagu diputar, nama artis dan judul langsung muncul dengan transisi halus.
Kesan akhirnya? Simpel tapi futuristik banget.

Tapi tentunya, gak semuanya berjalan mulus.
Ada satu malam di mana webhook-nya gak mau jalan, dan gue bingung total.
Setelah debugging hampir dua jam, ternyata masalahnya cuma di secret token webhook yang lupa gue set di GitHub. 😅
Rasanya campur aduk — antara pengen ketawa dan pengen banting laptop.

---

🚀 Penutup

Akhirnya setelah beberapa hari oprek sana-sini, website musik otomatis gue resmi jalan stabil.
Setiap kali gue nambah lagu di repo GitHub, website-nya langsung sinkron dalam hitungan detik.
Tanpa upload, tanpa dashboard, tanpa ribet.

Dari proyek ini, gue belajar banyak tentang automation, API, dan sinkronisasi data antar server.
Dan yang paling penting, gue sadar satu hal:

“Kalau lo punya ide yang keliatannya mustahil, jangan langsung nyerah — coba dulu. Kadang yang mustahil cuma butuh logika yang bener dan kopi yang cukup.” ☕😄

Sekarang setiap kali gue dengerin lagu di website itu, gue inget perjuangan tiap bug, tiap push, dan tiap rasa puas pas sistemnya jalan mulus.
Semuanya dimulai dari ide kecil yang muncul waktu ngopi malam.
Dan hasilnya? Sebuah website musik yang hidup otomatis — kayak punya DJ digital sendiri di server gue. 🎵💻✨