Glassmorphism 오디오 플레이어 컴포넌트

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-purple-300 to-violet-500 dark:from-gray-900 dark:via-purple-950 dark:to-violet-950 p-4 font-sans">
  <div class="relative w-full max-w-sm rounded-2xl p-6 shadow-xl overflow-hidden backdrop-blur-md bg-white/30 dark:bg-gray-800/30 border border-white/10 dark:border-white/5">
    <div class="absolute inset-0 -z-10">
      <div class="absolute top-0 left-0 w-24 h-24 bg-purple-400 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob dark:bg-purple-700"></div>
      <div class="absolute top-0 right-0 w-24 h-24 bg-violet-400 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000 dark:bg-violet-700"></div>
      <div class="absolute -bottom-8 left-20 w-24 h-24 bg-fuchsia-400 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000 dark:bg-fuchsia-700"></div>
    </div>

    <div class="flex items-center justify-start mb-4">
      <button class="p-2 focus:outline-none text-white/80 transition-transform duration-300 transform hover:scale-110">
        <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="M15 19l-7-7 7-7" />
        </svg>
      </button>
      <h3 class="text-lg font-semibold text-white ml-2 drop-shadow-md">Now Playing</h3>
    </div>

    <div class="relative w-48 h-48 mx-auto mb-6 rounded-xl overflow-hidden shadow-lg border border-white/20 dark:border-white/5 transform transition-transform duration-300 hover:scale-105">
      <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover" />
      <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent"></div>
    </div>

    <div class="text-center mb-6">
      <p class="text-2xl font-bold text-white mb-1 drop-shadow-md">Manufacturing Line 3</p>
      <p class="text-sm text-white/70 tracking-wide">Acoustic Waves for Productivity</p>
    </div>

    <div class="flex items-center mb-6">
      <span class="text-xs text-white/70 w-8 text-left">0:30</span>
      <div class="flex-1 h-1 bg-white/30 rounded-full mx-2 relative">
        <div class="absolute h-full w-1/3 bg-white rounded-full transition-all duration-300 ease-in-out" style="width: 33.33%;"></div>
        <div class="absolute right-2 top-1/2 -mt-1 w-3 h-3 bg-white rounded-full shadow-lg transform -translate-y-1/2"></div>
      </div>
      <span class="text-xs text-white/70 w-8 text-right">3:45</span>
    </div>

    <div class="flex items-center justify-around">
      <button aria-label="Previous Track" class="text-white/80 p-3 rounded-full hover:bg-white/20 transition-colors duration-200 focus:outline-none transform hover:scale-110">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" 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 14V5" />
        </svg>
      </button>
      <button aria-label="Play/Pause" class="text-violet-500 bg-white p-4 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110 focus:outline-none group">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 group-hover:text-violet-600" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
        </svg>
      </button>
      <button aria-label="Next Track" class="text-white/80 p-3 rounded-full hover:bg-white/20 transition-colors duration-200 focus:outline-none transform hover:scale-110">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" 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 5v14" />
        </svg>
      </button>
    </div>
  </div>
</div>

<style>
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

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

  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>