Membuat Aplikasi Music Player Sederhana dengan JavaScript

Dipublikasikan: Juli 2026

Music player adalah web app favorit untuk belajar JavaScript. Tutorial ini membuat pemutar musik dengan kontrol play, pause, next, previous, dan progress bar.

Fitur

Play & Pause
Next & Previous track
Progress bar interaktif
Daftar putar (playlist)

Kode Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Music Player</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Segoe UI',Arial,sans-serif; background:linear-gradient(135deg,#1a1a2e,#16213e); min-height:100vh; display:flex; justify-content:center; align-items:center; padding:20px; }
    .player { background:rgba(255,255,255,0.05); backdrop-filter:blur(15px); border-radius:24px; padding:35px; box-shadow:0 20px 60px rgba(0,0,0,0.5); width:100%; max-width:420px; text-align:center; border:1px solid rgba(255,255,255,0.1); }
    .album-art { width:200px; height:200px; border-radius:20px; margin:0 auto 20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.3); }
    .album-art img { width:100%; height:100%; object-fit:cover; }
    .song-title { color:#fff; font-size:20px; font-weight:600; margin-bottom:4px; }
    .song-artist { color:#8888aa; font-size:14px; margin-bottom:20px; }
    .progress-container { margin-bottom:20px; }
    .progress-bar { width:100%; height:6px; background:#2a2a4a; border-radius:3px; cursor:pointer; position:relative; }
    .progress-fill { height:100%; background:#4a4ae0; border-radius:3px; width:0%; }
    .time-row { display:flex; justify-content:space-between; color:#8888aa; font-size:12px; margin-top:5px; }
    .controls { display:flex; justify-content:center; align-items:center; gap:20px; margin-bottom:20px; }
    .controls button { background:none; border:none; color:#fff; cursor:pointer; font-size:20px; padding:8px; }
    .controls button:hover { color:#4a4ae0; }
    .controls .play-btn { width:56px; height:56px; background:#4a4ae0; border-radius:50%; font-size:24px; display:flex; align-items:center; justify-content:center; }
    .controls .play-btn:hover { background:#5a5af0; color:#fff; }
    .playlist { margin-top:15px; }
    .playlist-item { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px; cursor:pointer; text-align:left; }
    .playlist-item:hover { background:rgba(255,255,255,0.05); }
    .playlist-item.active { background:rgba(74,74,224,0.2); }
    .playlist-item .num { color:#8888aa; font-size:13px; width:20px; }
    .playlist-item .info { flex:1; }
    .playlist-item .info .title { color:#fff; font-size:14px; }
    .playlist-item .info .artist { color:#8888aa; font-size:11px; }
    .volume-row { display:flex; align-items:center; gap:10px; margin-top:15px; }
    .volume-row input { flex:1; accent-color:#4a4ae0; }
  </style>
</head>
<body>
  <div class="player">
    <div class="album-art"><img id="albumArt" src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=200" alt="Album" /></div>
    <div class="song-title" id="songTitle">Sunset Dreams</div>
    <div class="song-artist" id="songArtist">Artist Unknown</div>
    <div class="progress-container">
      <div class="progress-bar" id="progressBar" onclick="seek(event)"><div class="progress-fill" id="progressFill"></div></div>
      <div class="time-row"><span id="currentTime">0:00</span><span id="duration">0:00</span></div>
    </div>
    <div class="controls">
      <button onclick="prevTrack()">â®</button>
      <button class="play-btn" id="playBtn" onclick="togglePlay()">â–¶</button>
      <button onclick="nextTrack()">â</button>
    </div>
    <div class="volume-row"><span style="color:#8888aa">ðŸ”Š</span><input type="range" id="volume" min="0" max="1" step="0.1" value="0.7" oninput="setVolume()" /></div>
    <div class="playlist" id="playlist"></div>
  </div>
  <script>
    const tracks = [
      { title:'Sunset Dreams', artist:'LoFi Beats', cover:'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=200', url:'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3' },
      { title:'Ocean Waves', artist:'Chill Vibes', cover:'https://images.unsplash.com/photo-1459749411175-04bf5292ceea?w=200', url:'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3' },
      { title:'Night Rain', artist:'Ambient', cover:'https://images.unsplash.com/photo-1504898770365-14faca6a7320?w=200', url:'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3' },
      { title:'Morning Light', artist:'Acoustic', cover:'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=200', url:'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3' }
    ];
    let currentTrack = 0, isPlaying = false;
    const audio = new Audio();
    function loadTrack(i) { currentTrack = i; const t = tracks[i];
      document.getElementById('songTitle').textContent = t.title;
      document.getElementById('songArtist').textContent = t.artist;
      document.getElementById('albumArt').src = t.cover;
      audio.src = t.url; audio.volume = document.getElementById('volume').value;
      renderPlaylist(); if (isPlaying) audio.play(); }
    function togglePlay() { if (audio.src) { if (audio.paused) { audio.play(); isPlaying = true; document.getElementById('playBtn').textContent = 'â¸'; }
      else { audio.pause(); isPlaying = false; document.getElementById('playBtn').textContent = 'â–¶'; } } }
    function nextTrack() { loadTrack((currentTrack + 1) % tracks.length); if (isPlaying) audio.play(); }
    function prevTrack() { loadTrack((currentTrack - 1 + tracks.length) % tracks.length); if (isPlaying) audio.play(); }
    function setVolume() { audio.volume = document.getElementById('volume').value; }
    audio.addEventListener('timeupdate', () => { const p = (audio.currentTime / audio.duration) * 100 || 0;
      document.getElementById('progressFill').style.width = p + '%';
      document.getElementById('currentTime').textContent = formatTime(audio.currentTime); });
    audio.addEventListener('loadedmetadata', () => { document.getElementById('duration').textContent = formatTime(audio.duration); });
    audio.addEventListener('ended', () => nextTrack());
    function seek(e) { const bar = document.getElementById('progressBar'); const pct = (e.offsetX / bar.offsetWidth); audio.currentTime = pct * audio.duration; }
    function formatTime(s) { if (!s || isNaN(s)) return '0:00'; const m = Math.floor(s/60); const sec = Math.floor(s%60); return m + ':' + String(sec).padStart(2,'0'); }
    function renderPlaylist() { document.getElementById('playlist').innerHTML = tracks.map((t,i) => `
      <div class="playlist-item ${i===currentTrack?'active':''}" onclick="loadTrack(${i})">
        <div class="num">${i+1}</div>
        <div class="info"><div class="title">${t.title}</div><div class="artist">${t.artist}</div></div>
      </div>`).join(''); }
    loadTrack(0);
  </script>
</body>
</html>