오디오 플레이어 구성 요소

<div class="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 dark:from-gray-900 dark:via-gray-800 dark:to-black p-8 flex items-center justify-center">
  <div class="relative w-full max-w-xl bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-3xl shadow-xl border border-white border-opacity-20 dark:border-gray-700 p-8 space-y-8 overflow-hidden">
    <div class="absolute inset-0 top-0 left-0 bg-gradient-to-br from-teal-400 to-cyan-600 rounded-full w-48 h-48 opacity-30 blur-2xl animate-blob"></div>
    <div class="absolute inset-0 bottom-0 right-0 bg-gradient-to-br from-fuchsia-500 to-purple-600 rounded-full w-48 h-48 opacity-30 blur-2xl animate-blob animation-delay-2000"></div>
    <div class="absolute inset-0 top-1/2 left-1/2 bg-gradient-to-br from-lime-400 to-green-500 rounded-full w-48 h-48 opacity-30 blur-2xl animate-blob animation-delay-4000"></div>

    <!-- Header -->
    <div class="text-center text-white relative z-10">
      <h2 class="text-3xl font-extrabold mb-2 drop-shadow-lg">Now Playing</h2>
      <p class="text-lg opacity-80">Smooth listening, anytime, anywhere.</p>
    </div>

    <!-- Album Art and Song Info -->
    <div class="flex flex-col items-center space-y-6 relative z-10">
      <div class="w-48 h-48 rounded-2xl overflow-hidden shadow-2xl border-4 border-white border-opacity-30 transform hover:scale-105 transition duration-300">
        <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover">
      </div>
      <div class="text-center text-white">
        <h3 class="text-2xl font-bold mb-1 drop-shadow-lg">Dreamscape Echoes</h3>
        <p class="text-md opacity-80">Vocalist Name & Band Name</p>
      </div>
    </div>

    <!-- Progress Bar -->
    <div class="relative z-10">
      <div class="h-2 bg-white bg-opacity-30 rounded-full">
        <div class="h-full bg-gradient-to-r from-teal-400 to-cyan-600 rounded-full w-2/5"></div>
      </div>
      <div class="flex justify-between text-white text-sm mt-2 opacity-80">
        <span>1:45</span>
        <span>3:20</span>
      </div>
    </div>

    <!-- Controls -->
    <div class="flex justify-center space-x-8 text-white text-3xl relative z-10">
      <button class="relative group p-3 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition duration-300 transform hover:scale-110 backdrop-filter backdrop-blur-lg shadow-lg border border-white border-opacity-30">
        <i class="fas fa-backward"></i>
        <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Previous</span>
      </button>
      <button class="relative group p-4 rounded-full bg-gradient-to-br from-teal-400 to-cyan-600 hover:from-teal-500 hover:to-cyan-700 transition duration-300 transform hover:scale-110 shadow-lg border border-white border-opacity-30 text-4xl">
        <i class="fas fa-play"></i>
        <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Play</span>
      </button>
      <button class="relative group p-3 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition duration-300 transform hover:scale-110 backdrop-filter backdrop-blur-lg shadow-lg border border-white border-opacity-30">
        <i class="fas fa-forward"></i>
        <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Next</span>
      </button>
    </div>

    <!-- Volume and Shuffle/Repeat -->
    <div class="flex justify-between items-center text-white relative z-10">
      <div class="flex items-center space-x-3 w-1/3">
        <i class="fas fa-volume-up text-xl opacity-80"></i>
        <div class="w-full h-1.5 bg-white bg-opacity-30 rounded-full">
          <div class="h-full bg-gradient-to-r from-fuchsia-500 to-purple-600 rounded-full w-3/4"></div>
        </div>
      </div>
      <div class="flex space-x-6 text-2xl">
        <button class="relative group opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-110">
          <i class="fas fa-random"></i>
          <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Shuffle</span>
        </button>
        <button class="relative group opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-110">
          <i class="fas fa-redo-alt"></i>
          <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Repeat</span>
        </button>
      </div>
    </div>

    <!-- Social Share/Engagement -->
    <div class="flex justify-around text-white relative z-10">
      <button class="flex flex-col items-center space-y-1 opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-105">
        <i class="fas fa-share-alt text-2xl"></i>
        <span class="text-xs">Share</span>
      </button>
      <button class="flex flex-col items-center space-y-1 opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-105">
        <i class="fas fa-comment-dots text-2xl"></i>
        <span class="text-xs">Comment</span>
      </button>
      <button class="flex flex-col items-center space-y-1 opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-105">
        <i class="fas fa-heart text-2xl"></i>
        <span class="text-xs">Like</span>
      </button>
      <button class="flex flex-col items-center space-y-1 opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-105">
        <i class="fas fa-plus text-2xl"></i>
        <span class="text-xs">Add to Playlist</span>
      </button>
    </div>
    
    <!-- Equalizer Visualizer (dummy) -->
    <div class="relative z-10 flex justify-center items-end h-16 space-x-1 mt-4">
      <div class="w-1.5 bg-gradient-to-b from-teal-400 to-cyan-600 rounded-full animate-pulse h-1/2"></div>
      <div class="w-1.5 bg-gradient-to-b from-fuchsia-500 to-purple-600 rounded-full animate-pulse animation-delay-300 h-3/4"></div>
      <div class="w-1.5 bg-gradient-to-b from-lime-400 to-green-500 rounded-full animate-pulse animation-delay-600 h-1/3"></div>
      <div class="w-1.5 bg-gradient-to-b from-teal-400 to-cyan-600 rounded-full animate-pulse animation-delay-900 h-2/3"></div>
      <div class="w-1.5 bg-gradient-to-b from-fuchsia-500 to-purple-600 rounded-full animate-pulse animation-delay-1200 h-1/2"></div>
      <div class="w-1.5 bg-gradient-to-b from-lime-400 to-green-500 rounded-full animate-pulse animation-delay-1500 h-full"></div>
      <div class="w-1.5 bg-gradient-to-b from-teal-400 to-cyan-600 rounded-full animate-pulse animation-delay-1800 h-1/4"></div>
      <div class="w-1.5 bg-gradient-to-b from-fuchsia-500 to-purple-600 rounded-full animate-pulse animation-delay-2100 h-2/3"></div>
    </div>


  </div>
</div>

<style>
  @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css");

  /* Custom animations for background blobs */
  @keyframes blob {
    0%, 100% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 40px) scale(0.9);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, 0.01, 0.4, 1);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Custom animation for equalizer */
  @keyframes pulse {
    0%, 100% {
      transform: scaleY(0.5);
    }
    50% {
      transform: scaleY(1);
    }
  }

  .animate-pulse { 
    animation: pulse 1.5s infinite ease-in-out;
  }

  .animation-delay-300 { animation-delay: 0.3s; }
  .animation-delay-600 { animation-delay: 0.6s; }
  .animation-delay-900 { animation-delay: 0.9s; }
  .animation-delay-1200 { animation-delay: 1.2s; }
  .animation-delay-1500 { animation-delay: 1.5s; }
  .animation-delay-1800 { animation-delay: 1.8s; }
  .animation-delay-2100 { animation-delay: 2.1s; }

</style>

<script>
  // You can add JavaScript here for interactive elements if needed, but it's not required by the prompt.
  // For example, to toggle play/pause or change volume.
</script>