Audio Player

Audio player with playback controls, progress bar, waveform visualization, volume/speed controls, and playlist support. Includes mini and compact variants.

Basic Audio Player

Preview

Midnight City

M83

<div class="audio-player">
  <div class="audio-player-info">
    <div class="audio-player-artwork">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
    </div>
    <div class="audio-player-meta">
      <h4 class="audio-player-title">Midnight City</h4>
      <p class="audio-player-artist">M83</p>
    </div>
  </div>
  <div class="audio-player-progress">
    <div class="audio-player-progress-track">
      <div class="audio-player-progress-fill" style="width: 35%;"></div>
    </div>
    <div class="audio-player-progress-thumb" style="left: 35%;"></div>
  </div>
  <div class="audio-player-time">
    <span class="audio-player-time-current">1:24</span>
    <span class="audio-player-time-duration">4:03</span>
  </div>
  <div class="audio-player-controls">
    <button class="audio-player-btn audio-player-btn-sm" aria-label="Previous">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5"/></svg>
    </button>
    <button class="audio-player-btn audio-player-btn-play" aria-label="Play">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
    </button>
    <button class="audio-player-btn audio-player-btn-sm" aria-label="Next">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19"/></svg>
    </button>
  </div>
</div>

Requires: ux.min.css

<div class="relative flex flex-col w-full p-4 bg-base-100 rounded-box border border-base-300 shadow-sm">
  <div class="flex items-center gap-4 mb-4">
    <div class="shrink-0 flex items-center justify-center w-16 h-16 rounded-lg bg-base-200">
      <svg class="size-8 text-base-content/30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
    </div>
    <div class="flex-1 min-w-0">
      <h4 class="text-base font-semibold truncate mb-1">Midnight City</h4>
      <p class="text-sm text-base-content/60 truncate m-0">M83</p>
    </div>
  </div>
  <div class="relative w-full h-1 mb-2 cursor-pointer">
    <div class="absolute w-full h-full bg-base-300 rounded-sm overflow-hidden">
      <div class="absolute h-full bg-primary rounded-sm" style="width: 35%;"></div>
    </div>
  </div>
  <div class="flex justify-between text-xs text-base-content/40 mb-4" style="font-variant-numeric: tabular-nums;">
    <span>1:24</span>
    <span>4:03</span>
  </div>
  <div class="flex items-center justify-center gap-2">
    <button class="flex items-center justify-center w-9 h-9 rounded-full bg-transparent border-none cursor-pointer hover:bg-base-200"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5"/></svg></button>
    <button class="flex items-center justify-center w-14 h-14 rounded-full bg-primary text-primary-content border-none cursor-pointer"><svg class="size-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg></button>
    <button class="flex items-center justify-center w-9 h-9 rounded-full bg-transparent border-none cursor-pointer hover:bg-base-200"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19"/></svg></button>
  </div>
</div>

Requires: tw.min.css

// Wire up the HTML5 Audio API:
// const audio = new Audio('track.mp3');
// playBtn.onclick = () => audio.paused ? audio.play() : audio.pause();
// audio.ontimeupdate = () => &#123;
//   const pct = (audio.currentTime / audio.duration) * 100;
//   progressFill.style.width = pct + '%';
// &#125;;

Mini Player

Preview

Retrograde

James Blake

<div class="audio-player audio-player-mini">
  <div class="audio-player-info">
    <div class="audio-player-artwork">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
    </div>
    <div class="audio-player-meta">
      <h4 class="audio-player-title">Retrograde</h4>
      <p class="audio-player-artist">James Blake</p>
    </div>
  </div>
  <div class="audio-player-controls">
    <button class="audio-player-btn audio-player-btn-play" aria-label="Play">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
    </button>
  </div>
  <div class="audio-player-mini-progress">
    <div class="audio-player-mini-progress-fill" style="width: 60%;"></div>
  </div>
</div>

Requires: ux.min.css

<div class="relative flex items-center gap-4 px-4 py-2 bg-base-100 rounded-box border border-base-300 shadow-sm">
  <div class="shrink-0 flex items-center justify-center w-12 h-12 rounded-lg bg-base-200">
    <svg class="size-6 text-base-content/30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
  </div>
  <div class="flex-1 min-w-0">
    <h4 class="text-sm font-semibold truncate">Retrograde</h4>
    <p class="text-xs text-base-content/60 truncate m-0">James Blake</p>
  </div>
  <button class="flex items-center justify-center w-11 h-11 rounded-full bg-primary text-primary-content border-none cursor-pointer">
    <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
  </button>
  <div class="absolute bottom-0 left-0 right-0 h-[3px] bg-base-300">
    <div class="h-full bg-primary" style="width: 60%;"></div>
  </div>
</div>

Requires: tw.min.css

// Mini player — same Audio API, reduced UI:
// audio.ontimeupdate = () => miniProgressFill.style.width = pct + '%';

With Playlist

Preview

Intro

The xx

Playlist

3 tracks

Intro

2:07

VCR

3:31

Crystalised

4:42

<div class="audio-player">
  <div class="audio-player-info">
    <div class="audio-player-artwork">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
    </div>
    <div class="audio-player-meta">
      <h4 class="audio-player-title">Intro</h4>
      <p class="audio-player-artist">The xx</p>
    </div>
  </div>
  <div class="audio-player-controls">
    <button class="audio-player-btn audio-player-btn-sm" aria-label="Previous">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5"/></svg>
    </button>
    <button class="audio-player-btn audio-player-btn-play" aria-label="Play">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
    </button>
    <button class="audio-player-btn audio-player-btn-sm" aria-label="Next">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19"/></svg>
    </button>
  </div>
  <div class="audio-player-playlist">
    <div class="audio-player-playlist-header">
      <h5 class="audio-player-playlist-title">Playlist</h5>
      <span class="audio-player-playlist-count">3 tracks</span>
    </div>
    <div class="audio-player-playlist-item audio-player-playlist-item-active">
      <span class="audio-player-playlist-item-index">1</span>
      <div class="audio-player-playlist-item-info">
        <div class="audio-player-playlist-item-title">Intro</div>
      </div>
      <span class="audio-player-playlist-item-duration">2:07</span>
    </div>
    <div class="audio-player-playlist-item">
      <span class="audio-player-playlist-item-index">2</span>
      <div class="audio-player-playlist-item-info">
        <div class="audio-player-playlist-item-title">VCR</div>
      </div>
      <span class="audio-player-playlist-item-duration">3:31</span>
    </div>
    <div class="audio-player-playlist-item">
      <span class="audio-player-playlist-item-index">3</span>
      <div class="audio-player-playlist-item-info">
        <div class="audio-player-playlist-item-title">Crystalised</div>
      </div>
      <span class="audio-player-playlist-item-duration">4:42</span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full p-4 bg-base-100 rounded-box border border-base-300 shadow-sm">
  <div class="flex items-center gap-4 mb-4">
    <div class="shrink-0 flex items-center justify-center w-16 h-16 rounded-lg bg-base-200">
      <svg class="size-8 text-base-content/30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
    </div>
    <div class="flex-1 min-w-0">
      <h4 class="text-base font-semibold truncate mb-1">Intro</h4>
      <p class="text-sm text-base-content/60 truncate m-0">The xx</p>
    </div>
  </div>
  <div class="flex items-center justify-center gap-2 mb-4">
    <button class="flex items-center justify-center w-9 h-9 rounded-full bg-transparent border-none cursor-pointer hover:bg-base-200"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5"/></svg></button>
    <button class="flex items-center justify-center w-14 h-14 rounded-full bg-primary text-primary-content border-none cursor-pointer"><svg class="size-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg></button>
    <button class="flex items-center justify-center w-9 h-9 rounded-full bg-transparent border-none cursor-pointer hover:bg-base-200"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19"/></svg></button>
  </div>
  <div class="border-t border-base-300 pt-4 max-h-[200px] overflow-y-auto">
    <div class="flex items-center justify-between mb-2">
      <h5 class="text-sm font-semibold m-0">Playlist</h5>
      <span class="text-xs text-base-content/40">3 tracks</span>
    </div>
    <div class="flex items-center gap-2 p-2 rounded bg-primary text-primary-content cursor-pointer">
      <span class="text-xs w-6 text-center">1</span>
      <div class="flex-1 min-w-0"><div class="text-sm font-medium truncate">Intro</div></div>
      <span class="text-xs opacity-80">2:07</span>
    </div>
    <div class="flex items-center gap-2 p-2 rounded hover:bg-base-200 cursor-pointer">
      <span class="text-xs w-6 text-center text-base-content/40">2</span>
      <div class="flex-1 min-w-0"><div class="text-sm font-medium truncate">VCR</div></div>
      <span class="text-xs text-base-content/40">3:31</span>
    </div>
    <div class="flex items-center gap-2 p-2 rounded hover:bg-base-200 cursor-pointer">
      <span class="text-xs w-6 text-center text-base-content/40">3</span>
      <div class="flex-1 min-w-0"><div class="text-sm font-medium truncate">Crystalised</div></div>
      <span class="text-xs text-base-content/40">4:42</span>
    </div>
  </div>
</div>

Requires: tw.min.css

// Manage playlist with an array and index:
// let tracks = ['intro.mp3', 'vcr.mp3', 'crystalised.mp3'];
// let current = 0;
// nextBtn.onclick = () => &#123; current++; audio.src = tracks[current]; audio.play(); &#125;;