Audio Player 组件

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-purple-900 dark:via-pink-900 dark:to-red-900 
              p-8 border-8 border-black dark:border-white shadow-brutalism 
              w-full max-w-2xl mx-auto 
              grid grid-cols-1 md:grid-cols-3 gap-6 transform -rotate-2 hover:rotate-0 transition-transform duration-300 relative"> 
       
    <div class="absolute top-4 right-4 text-black dark:text-white text-xs font-mono transform rotate-90">
        BRUTAL_AUDIO_PLAYER
    </div>

    <!-- Album Art / Info -->
    <div class="md:col-span-1 bg-black dark:bg-white p-4 border-4 border-black dark:border-white shadow-brutalism-sm">
      <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-auto object-cover border-4 border-red-500 dark:border-blue-500 mb-4">
      <div class="text-white dark:text-black font-bold text-xl mb-1 font-mono">The Concrete Jungle</div>
      <div class="text-gray-300 dark:text-gray-700 text-sm font-mono">DJ Monolith</div>
      <div class="text-gray-500 dark:text-gray-500 text-xs font-mono mt-2">© 2023 Brutal Sounds Inc.</div>
    </div>

    <!-- Main Controls -->
    <div class="md:col-span-2 flex flex-col justify-between">

      <!-- Track Title & Progress Bar -->
      <div class="bg-white dark:bg-black p-4 border-4 border-black dark:border-white shadow-brutalism-sm mb-6">
        <div class="text-black dark:text-white font-mono text-lg mb-2">Track 01: Echoes in the Void</div>
        <div class="w-full bg-gray-300 dark:bg-gray-700 h-4 border-2 border-black dark:border-white relative">
          <div class="bg-red-500 dark:bg-blue-500 h-full w-3/5 border-r-2 border-black dark:border-white"></div>
          <div class="absolute top-0 left-3/5 -mt-1 -ml-1 h-6 w-6 bg-green-400 dark:bg-yellow-400 border-4 border-black dark:border-white transform rotate-45"></div>
        </div>
        <div class="flex justify-between text-xs font-mono text-black dark:text-white mt-1">
          <span>1:45</span>
          <span>4:23</span>
        </div>
      </div>

      <!-- Playback Controls -->
      <div class="grid grid-cols-3 gap-4 mb-6">
        <button class="bg-black dark:bg-white text-white dark:text-black p-4 border-4 border-black dark:border-white 
                       shadow-brutalism-sm hover:bg-red-500 dark:hover:bg-blue-500 transition-colors duration-200 
                       font-bold text-xl font-mono transform skew-x-6 hover:skew-x-0">RWD</button>
        <button class="bg-black dark:bg-white text-white dark:text-black p-4 border-4 border-black dark:border-white 
                       shadow-brutalism-sm hover:bg-green-500 dark:hover:bg-yellow-500 transition-colors duration-200 
                       font-bold text-xl font-mono transform -rotate-12 hover:rotate-0">PLAY</button>
        <button class="bg-black dark:bg-white text-white dark:text-black p-4 border-4 border-black dark:border-white 
                       shadow-brutalism-sm hover:bg-red-500 dark:hover:bg-blue-500 transition-colors duration-200 
                       font-bold text-xl font-mono transform skew-x-6 hover:skew-x-0">FFW</button>
      </div>

      <!-- Volume & Mute -->
      <div class="flex items-center space-x-4 bg-white dark:bg-black p-4 border-4 border-black dark:border-white shadow-brutalism-sm">
        <span class="text-black dark:text-white font-mono text-lg">VOL:</span>
        <div class="flex-grow bg-gray-300 dark:bg-gray-700 h-4 border-2 border-black dark:border-white relative">
          <div class="bg-green-500 dark:bg-yellow-500 h-full w-4/5 border-r-2 border-black dark:border-white"></div>
          <div class="absolute top-0 left-4/5 -mt-1 -ml-1 h-6 w-6 bg-red-400 dark:bg-cyan-400 border-4 border-black dark:border-white transform rotate-45"></div>
        </div>
        <button class="bg-black dark:bg-white text-white dark:text-black p-2 border-4 border-black dark:border-white 
                       shadow-brutalism-sm hover:bg-purple-500 dark:hover:bg-orange-500 transition-colors duration-200 
                       font-bold text-sm font-mono">MUTE</button>
      </div>

    </div>

    <!-- Footer / Additional Info -->
    <div class="md:col-span-3 bg-black dark:bg-white p-4 border-4 border-black dark:border-white shadow-brutalism-sm
                flex justify-around items-center flex-wrap mt-6">
        <div class="text-white dark:text-black font-mono text-sm mb-2 md:mb-0">"DISTORTION IS BEAUTY"</div>
        <div class="relative w-16 h-16 border-4 border-red-500 dark:border-blue-500 transform rotate-6 hover:rotate-0 transition-transform duration-300">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Artist Avatar" class="w-full h-full object-cover">
            <div class="absolute -bottom-2 -right-2 w-6 h-6 bg-green-500 dark:bg-yellow-500 border-4 border-black dark:border-white"></div>
        </div>
        <div class="text-white dark:text-black font-mono text-sm mt-2 md:mt-0">EST. MMXXIII</div>
    </div>

  </div>

  <!-- Brutalist Shadow Utility Class -->
  <style>
    .shadow-brutalism {
      box-shadow: 12px 12px 0px 0px #000, 14px 14px 0px 0px rgb(249 115 22);
    }
    .shadow-brutalism-sm {
      box-shadow: 6px 6px 0px 0px #000, 8px 8px 0px 0px rgb(239 68 68);
    }
    .dark .shadow-brutalism {
      box-shadow: 12px 12px 0px 0px #fff, 14px 14px 0px 0px rgb(59 130 246);
    }
    .dark .shadow-brutalism-sm {
      box-shadow: 6px 6px 0px 0px #fff, 8px 8px 0px 0px rgb(96 165 250);
    }
  </style>
</div>