A customizable audio player component with playback controls and volume management

Basic Usage

• Play/Pause controls
• Seek bar with time tracking
• Volume control with mute toggle
• Responsive design
• Smooth animations

• Base styling with Tailwind:
  Core Structure

  .audio-container {
    @apply relative w-full max-w-lg border-2 border-primary-light-500 
          rounded-lg shadow-lg p-4 flex items-center gap-3 bg-white;
  }
  
  .controls {
    @apply flex items-center gap-3;
  }
  

• Interactive elements:
  Interactive Styles

  button {
    @apply transition-transform transform hover:scale-110;
  }
  
  input[type="range"] {
    @apply cursor-pointer accent-primary-light-500;
  }