mp3_player.html

<style>
  @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500&display=swap');

  .player-wrap {
    font-family: 'DM Sans', sans-serif;
    max-width: 420px;
    margin: 2rem auto;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 20px;
    overflow: hidden;
  }

  .cover-area {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 2rem 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .vinyl {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #1a1a1a, #333, #1a1a1a, #333, #1a1a1a, #4a4a4a, #1a1a1a);
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
  }
  .vinyl.spinning {
    animation: spin 3s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .vinyl::after {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    background: #e8e0d0;
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px #c8bca0;
  }

  .song-info {
    margin-top: 1.25rem;
    text-align: center;
    color: #fff;
  }
  .song-title {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
  }
  .song-artist {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    font-weight: 300;
    margin: 0;
    font-family: 'Space Mono', monospace;
  }

  .controls-area {
    padding: 1.25rem 1.5rem 1.5rem;
  }

  .progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.25rem;
  }
  .time-label {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--color-text-tertiary);
    min-width: 32px;
  }
  .progress-bar {
    flex: 1;
    height: 3px;
    background: var(--color-border-tertiary);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
  }
  .progress-fill {
    height: 100%;
    background: #0f3460;
    border-radius: 2px;
    width: 0%;
    transition: width 1s linear;
    position: relative;
  }
  .progress-fill::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: #0f3460;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-background-primary);
  }

  .btn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .ctrl-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    transition: background 0.15s, color 0.15s, transform 0.1s;
  }
  .ctrl-btn:hover {
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
  }
  .ctrl-btn:active { transform: scale(0.94); }
  .ctrl-btn svg { display: block; }

  .play-btn {
    width: 52px;
    height: 52px;
    background: #0f3460;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin: 0 8px;
    transition: background 0.15s, transform 0.1s;
  }
  .play-btn:hover { background: #1a4a7a; }
  .play-btn:active { transform: scale(0.95); }

  .vol-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 0.5px solid var(--color-border-tertiary);
  }
  .vol-icon { color: var(--color-text-tertiary); }
  .vol-slider {
    flex: 1;
    accent-color: #0f3460;
  }

  .playlist {
    border-top: 0.5px solid var(--color-border-tertiary);
    max-height: 180px;
    overflow-y: auto;
  }
  .playlist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 1.5rem;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 0.5px solid var(--color-border-tertiary);
  }
  .playlist-item:last-child { border-bottom: none; }
  .playlist-item:hover { background: var(--color-background-secondary); }
  .playlist-item.active { background: var(--color-background-secondary); }
  .track-num {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--color-text-tertiary);
    min-width: 16px;
    text-align: right;
  }
  .track-num.playing {
    color: #0f3460;
    font-weight: 700;
  }
  .track-info { flex: 1; min-width: 0; }
  .track-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .track-name.active { color: #0f3460; }
  .track-dur {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--color-text-tertiary);
  }
</style>

<div class="player-wrap">
  <div class="cover-area">
    <div class="vinyl" id="vinyl"></div>
    <div class="song-info">
      <p class="song-title" id="song-title">Midnight Drive</p>
      <p class="song-artist" id="song-artist">The Neon Collective</p>
    </div>
  </div>

  <div class="controls-area">
    <div class="progress-row">
      <span class="time-label" id="cur-time">0:00</span>
      <div class="progress-bar" id="prog-bar">
        <div class="progress-fill" id="prog-fill"></div>
      </div>
      <span class="time-label" style="text-align:right" id="dur-time">3:42</span>
    </div>

    <div class="btn-row">
      <button class="ctrl-btn" id="shuffle-btn" title="Shuffle">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/>
          <polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/>
        </svg>
      </button>

      <button class="ctrl-btn" id="prev-btn" title="Previous">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
          <polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5" stroke="currentColor" stroke-width="2" fill="none"/>
        </svg>
      </button>

      <button class="play-btn" id="play-btn" title="Play/Pause">
        <svg id="play-icon" width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
      </button>

      <button class="ctrl-btn" id="next-btn" title="Next">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
          <polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19" stroke="currentColor" stroke-width="2" fill="none"/>
        </svg>
      </button>

      <button class="ctrl-btn" id="repeat-btn" title="Repeat">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/>
          <polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/>
        </svg>
      </button>
    </div>

    <div class="vol-row">
      <svg class="vol-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
        <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
      </svg>
      <input type="range" class="vol-slider" id="vol-slider" min="0" max="100" value="75">
    </div>
  </div>

  <div class="playlist" id="playlist"></div>
</div>

<script>
const tracks = [
  { title: "Midnight Drive", artist: "The Neon Collective", duration: "3:42", secs: 222 },
  { title: "Golden Hour", artist: "Solstice Radio", duration: "4:15", secs: 255 },
  { title: "Slow Burn", artist: "Luna Park", duration: "3:58", secs: 238 },
  { title: "Coastline", artist: "The Neon Collective", duration: "5:02", secs: 302 },
  { title: "City Lights", artist: "Solstice Radio", duration: "3:28", secs: 208 },
];

let cur = 0, playing = false, elapsed = 0, timer = null;
let shuffle = false, repeat = false;

const vinyl = document.getElementById('vinyl');
const songTitle = document.getElementById('song-title');
const songArtist = document.getElementById('song-artist');
const curTime = document.getElementById('cur-time');
const durTime = document.getElementById('dur-time');
const progFill = document.getElementById('prog-fill');
const playIcon = document.getElementById('play-icon');
const playlist = document.getElementById('playlist');

function fmt(s) {
  return Math.floor(s/60) + ':' + String(Math.floor(s%60)).padStart(2,'0');
}

function loadTrack(i) {
  cur = i; elapsed = 0;
  const t = tracks[i];
  songTitle.textContent = t.title;
  songArtist.textContent = t.artist;
  durTime.textContent = t.duration;
  curTime.textContent = '0:00';
  progFill.style.width = '0%';
  progFill.style.transition = 'none';
  renderPlaylist();
}

function renderPlaylist() {
  playlist.innerHTML = '';
  tracks.forEach((t, i) => {
    const item = document.createElement('div');
    item.className = 'playlist-item' + (i === cur ? ' active' : '');
    item.innerHTML = `
      <span class="track-num ${i === cur && playing ? 'playing' : ''}">${i+1}</span>
      <div class="track-info">
        <div class="track-name ${i === cur ? 'active' : ''}">${t.title}</div>
      </div>
      <span class="track-dur">${t.duration}</span>`;
    item.addEventListener('click', () => { loadTrack(i); startPlay(); });
    playlist.appendChild(item);
  });
}

function startPlay() {
  playing = true;
  vinyl.classList.add('spinning');
  playIcon.innerHTML = '<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>';
  clearInterval(timer);
  const total = tracks[cur].secs;
  progFill.style.transition = 'width 1s linear';
  timer = setInterval(() => {
    elapsed++;
    curTime.textContent = fmt(elapsed);
    progFill.style.width = ((elapsed / total) * 100) + '%';
    if (elapsed >= total) {
      clearInterval(timer);
      nextTrack();
    }
  }, 1000);
  renderPlaylist();
}

function pausePlay() {
  playing = false;
  vinyl.classList.remove('spinning');
  playIcon.innerHTML = '<polygon points="5 3 19 12 5 21 5 3"/>';
  clearInterval(timer);
  progFill.style.transition = 'none';
  renderPlaylist();
}

function nextTrack() {
  let next;
  if (shuffle) {
    next = Math.floor(Math.random() * tracks.length);
  } else if (repeat) {
    next = cur;
  } else {
    next = (cur + 1) % tracks.length;
  }
  loadTrack(next);
  startPlay();
}

document.getElementById('play-btn').addEventListener('click', () => {
  if (playing) pausePlay(); else startPlay();
});

document.getElementById('prev-btn').addEventListener('click', () => {
  loadTrack((cur - 1 + tracks.length) % tracks.length);
  if (playing) startPlay();
});

document.getElementById('next-btn').addEventListener('click', () => {
  loadTrack((cur + 1) % tracks.length);
  if (playing) startPlay();
});

document.getElementById('shuffle-btn').addEventListener('click', function() {
  shuffle = !shuffle;
  this.style.color = shuffle ? '#0f3460' : '';
});

document.getElementById('repeat-btn').addEventListener('click', function() {
  repeat = !repeat;
  this.style.color = repeat ? '#0f3460' : '';
});

document.getElementById('prog-bar').addEventListener('click', function(e) {
  const rect = this.getBoundingClientRect();
  const pct = (e.clientX - rect.left) / rect.width;
  elapsed = Math.floor(pct * tracks[cur].secs);
  curTime.textContent = fmt(elapsed);
  progFill.style.transition = 'none';
  progFill.style.width = (pct * 100) + '%';
});

renderPlaylist();
</script>