htmlcssjavascriptmusikaplikasiMenengah11 mnt baca

UI Music Player

Membangun antarmuka pemutar musik: playlist, play/pause, next/prev, dan progress bar.

Kenapa Music Player?

Music player mengajarkan state machine: aplikasi punya status (bermain/berhenti), daftar antrean, dan posisi waktu yang terus berubah. Pola ini dipakai di pemutar video, podcast, dan presentasi slide.

Langkah Membangun

HTML: Kartu player: cover album, judul lagu, artis, progress bar (bisa diklik untuk seek), kontrol (prev, play/pause, next), kontrol volume, dan daftar playlist.

CSS: Tampilan seperti Spotify mini: background gelap, cover membulat dengan shadow, tombol play besar di tengah. Progress bar tipis yang terisi sesuai posisi.

JS: Karena tidak ada file audio asli, kita simulasikan dengan timer:

  1. Array playlist: { judul, artis, durasi (detik), cover }.
  2. State: indeksLagu, sedangMain, posisiDetik.
  3. setInterval tiap 1 detik menambah posisi jika sedang main. Jika posisi >= durasi, otomatis next.
  4. Klik progress bar: hitung rasio klik untuk melompat (seek).
  5. Klik lagu di playlist: langsung putar lagu itu.

Untuk audio sungguhan, pola ini sama persis hanya timer diganti event timeupdate dari elemen <audio>.

Kesalahan Umum

  • Interval tidak dihentikan saat pause sehingga posisi terus bertambah (clearInterval saat pause).
  • Seek menghitung dari posisi yang salah (pakai getBoundingClientRect untuk posisi akurat).
  • Lagu terakhir tidak loop kembali ke awal (pakai modulo).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Mode Shuffle & Repeat

Tambahkan tombol shuffle (🔀) yang memutar lagu acak saat lagu selesai, dan tombol repeat (🔁) yang mengulang lagu yang sama.