Interactive Audio Player with Lyrics Editor & Sync

<div class="xl:col-span-1 space-y-6">
  <!-- Track Info Card -->
  <div class="bg-white/5 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6 backdrop-blur-xl space-y-4">
    <div class="flex items-center gap-4">
      <div id="albumArt"
        class="w-16 h-16 rounded-xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center ring-1 ring-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="music"
          class="lucide lucide-music w-8 h-8 text-white/60">
          <path d="M9 18V5l12-2v13"></path>
          <circle cx="6" cy="18" r="3"></circle>
          <circle cx="18" cy="16" r="3"></circle>
        </svg>
      </div>
      <div class="flex-1 min-w-0">
        <h3 id="trackName" class="font-semibold truncate">No track selected</h3>
        <p id="trackArtist" class="text-sm text-white/60">Upload an audio file to begin</p>
        <div class="flex items-center gap-2 mt-1">
          <span id="currentTime" class="text-xs text-white/50">00:00</span>
          <span class="text-white/30">/</span>
          <span id="totalTime" class="text-xs text-white/50">00:00</span>
        </div>
      </div>
    </div>

    <!-- Progress Bar -->
    <div class="space-y-2">
      <div id="progressContainer" class="relative h-2 bg-white/10 rounded-full cursor-pointer group">
        <div id="progressLoaded" class="absolute inset-y-0 left-0 bg-white/20 rounded-full transition-all"></div>
        <div id="progressPlayed"
          class="absolute inset-y-0 left-0 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full transition-all">
        </div>
        <div id="progressThumb"
          class="absolute w-4 h-4 bg-white rounded-full -top-1 -translate-x-1/2 shadow-lg opacity-0 group-hover:opacity-100 transition-opacity"
          style="left: 0%"></div>
      </div>
    </div>

    <!-- Player Controls -->
    <div class="flex items-center justify-center gap-3">
      <button id="prevBtn" class="p-2 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10 transition-all">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="skip-back" class="lucide lucide-skip-back w-5 h-5"><path d="M17.971 4.285A2 2 0 0 1 21 6v12a2 2 0 0 1-3.029 1.715l-9.997-5.998a2 2 0 0 1-.003-3.432z"></path><path d="M3 20V4"></path></svg>
                </button>
      <button id="playBtn" class="p-3 rounded-xl bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 ring-2 ring-purple-500/20 transition-all">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play w-6 h-6"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
                </button>
      <button id="nextBtn" class="p-2 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10 transition-all">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="skip-forward" class="lucide lucide-skip-forward w-5 h-5"><path d="M21 4v16"></path><path d="M6.029 4.285A2 2 0 0 0 3 6v12a2 2 0 0 0 3.029 1.715l9.997-5.998a2 2 0 0 0 .003-3.432z"></path></svg>
                </button>
    </div>

    <!-- Audio Visualizer -->
    <div id="visualizer" class="hidden flex items-end justify-center h-12 gap-1">
      <div class="spectrum-bar waveform-bar h-4"></div>
      <div class="spectrum-bar waveform-bar h-8"></div>
      <div class="spectrum-bar waveform-bar h-6"></div>
      <div class="spectrum-bar waveform-bar h-10"></div>
      <div class="spectrum-bar waveform-bar h-5"></div>
      <div class="spectrum-bar waveform-bar h-9"></div>
      <div class="spectrum-bar waveform-bar h-7"></div>
      <div class="spectrum-bar waveform-bar h-11"></div>
      <div class="spectrum-bar waveform-bar h-4"></div>
    </div>

    <!-- Volume & Speed -->
    <div class="grid grid-cols-2 gap-4 pt-4 border-t border-white/10">
      <div class="space-y-2">
        <label class="flex items-center gap-2 text-sm text-white/70">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="volume-2" class="lucide lucide-volume-2 w-4 h-4"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"></path><path d="M16 9a5 5 0 0 1 0 6"></path><path d="M19.364 18.364a9 9 0 0 0 0-12.728"></path></svg>
                    Volume
                  </label>
        <input id="volumeSlider" type="range" min="0" max="1" step="0.01" value="0.8" class="w-full accent-purple-500">
        <div class="text-xs text-white/50 text-center"><span id="volumeValue">80</span>%</div>
      </div>
      <div class="space-y-2">
        <label class="flex items-center gap-2 text-sm text-white/70">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap w-4 h-4"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>
                    Speed
                  </label>
        <input id="speedSlider" type="range" min="0.5" max="1.5" step="0.1" value="1" class="w-full accent-purple-500">
        <div class="text-xs text-white/50 text-center"><span id="speedValue">1.0</span>x</div>
      </div>
    </div>
  </div>