Audio Player 组件

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">

  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
              border border-gray-200 dark:border-gray-700
              transform transition-all duration-300 ease-in-out
              hover:shadow-2xl hover:-translate-y-1
              print-paper-effect relative">

    <!-- Page Curl / Fold Effect (Visual detail for paper feel) -->
    <div class="absolute top-0 right-0 w-16 h-16 bg-gray-50 dark:bg-gray-700 rounded-bl-lg opacity-75" style="clip-path: polygon(100% 0, 0 0, 100% 100%);"></div>
    <div class="absolute top-0 right-0 w-16 h-16 bg-gray-100 dark:bg-gray-900 rounded-bl-lg" style="clip-path: polygon(100% 0, 70% 0, 100% 30%);"></div>

    <!-- Album Art Section -->
    <div class="relative w-full h-64 overflow-hidden rounded-t-lg border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/600/400?random=1" alt="Album Art" class="w-full h-full object-cover object-center filter grayscale-0 dark:filter-none">
      <div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
      <div class="absolute bottom-4 left-4 text-white p-2 rounded-md">
        <h3 class="text-xl font-bold mb-1 drop-shadow-lg">Ephemeral Echoes</h3>
        <p class="text-sm text-gray-200 drop-shadow-md">Luna & The Celestial Tides</p>
      </div>
    </div>

    <!-- Controls Section -->
    <div class="p-6 space-y-4">

      <!-- Playback Progress Bar -->
      <div class="w-full flex items-center space-x-2 text-gray-600 dark:text-gray-400">
        <span class="text-xs font-medium min-w-[30px]">0:45</span>
        <div class="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden relative cursor-pointer">
          <div class="h-full bg-blue-500 dark:bg-blue-400 rounded-full" style="width: 30%;"></div>
          <!-- Draggable thumb (illustrative) -->
          <div class="absolute h-4 w-4 bg-white dark:bg-gray-300 rounded-full shadow border-2 border-blue-500 dark:border-blue-400 -translate-y-1/2 top-1/2 left-[30%] -ml-2"></div>
        </div>
        <span class="text-xs font-medium min-w-[30px]">3:20</span>
      </div>

      <!-- Main Playback Buttons -->
      <div class="flex items-center justify-center space-x-6 text-gray-700 dark:text-gray-300">
        <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200" aria-label="Previous">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
          </svg>
        </button>
        <button class="p-4 bg-blue-500 dark:bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 transition-all duration-200" aria-label="Play/Pause">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
        <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200" aria-label="Next">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M6 5l7 7-7 7" />
          </svg>
        </button>
      </div>

      <!-- Secondary Controls -->
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 pt-4 border-t border-dashed border-gray-300 dark:border-gray-600">
        <button class="flex items-center space-x-1 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 text-sm" aria-label="Shuffle">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12V8m5.416-3a8.001 8.001 0 0115.356 2m-1.879 11H18V9m3 3L15 9m3 9l3 3"/></svg>
          <span class="hidden sm:inline">Shuffle</span>
        </button>

        <div class="flex items-center space-x-4">
          <!-- Volume Control -->
          <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="Volume">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.536 8.464A5 5 0 0117 12h2a7 7 0 00-1.745-4.37A9.001 9.001 0 0121 12h2a11.001 11.001 0 00-2.825-6.879L18 6l-2.464-2.464zM9 6H4a1 1 0 00-1 1v10a1 1 0 001 1h5l4 4V2l-4 4z" />
            </svg>
          </button>
          <!-- Current Playback Mode (Loop/Repeat) -->
          <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="Repeat">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
            </svg>
          </button>
          <!-- More Options / Playlist -->
          <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="More Options">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
            </svg>
          </button>
        </div>
      </div>
    </div>

  </div>

</div>

<style>
  /* This is for the 'paper-like' effect */
  .print-paper-effect {
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* Simulating a subtle texture and shadow */
  }

  /* Optional: Add a very subtle grain/texture if feasible without extra elements */
  /* For a true paper look, a background image or SVG filter would be ideal, but out of scope for pure HTML/TW */
  /* .print-paper-effect::before {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0; bottom: 0;
     background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuMDcwMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDEyOCwxMjgsMTI4LDAuMDgpIiBzdHJva2Utd2lkdGg9IjEuMjUiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48L3BhdHRlcm4+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuMDcwMikvIj48L3N2Z2c+');
     opacity: 0.2;
     pointer-events: none;
     z-index: 0;
  } */
</style>