Componente del reproductor de audio

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

  <!-- Audio Player Container -->
  <div class="w-full max-w-sm md:max-w-md lg:max-w-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 rounded-xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-stone-300 dark:border-stone-700">

    <!-- Header / Track Info -->
    <div class="p-6 flex flex-col items-center text-center">
      <div class="w-32 h-32 md:w-40 md:h-40 rounded-lg shadow-lg mb-4 overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/300/300?random=1" alt="Album Art" class="w-full h-full object-cover">
      </div>
      <p class="text-xs text-stone-600 dark:text-stone-400 uppercase tracking-widest mb-1">Playing from your matches</p>
      <h2 class="text-2xl md:text-3xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate max-w-full">Echoes of Your Smile</h2>
      <p class="text-base text-stone-700 dark:text-stone-300 mb-4 truncate max-w-full">Melody Muses ft. Rhythmic Soul</p>
    </div>

    <!-- Playback Controls and Progress Bar -->
    <div class="px-6 pb-6 pt-2">
      <!-- Progress Bar -->
      <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 mb-5 overflow-hidden group">
        <div class="w-3/4 bg-amber-600 h-2.5 rounded-full transition-all duration-1000 ease-out group-hover:w-[85%]" style="width: 75%;"></div>
      </div>

      <!-- Time Display -->
      <div class="flex justify-between text-xs font-mono text-stone-600 dark:text-stone-400 mb-6">
        <span>2:45</span>
        <span>-1:15</span>
      </div>

      <!-- Main Playback Buttons -->
      <div class="flex items-center justify-around mb-8">
        <button class="p-3 rounded-full text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 11.2a1 1 0 0 0-1.4 0L14 13.9V6a1 1 0 0 0-2 0v7.9l-2.9-2.7a1 1 0 0 0-1.4 1.4l4 3.7c.4.4 1 .4 1.4 0l4-3.7a1 1 0 0 0 0-1.4z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
        </button>
        <button class="p-3 rounded-full text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/></svg>
        </button>
        <button class="p-4 rounded-full bg-amber-600 text-white shadow-lg transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-amber-500 transition-all duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 5v14l12-7z"/>
          </svg>
        </button>
        <button class="p-3 rounded-full text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 5v14l-11-7z"/></svg>
        </button>
        <button class="p-3 rounded-full text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.7 12.8a1 1 0 0 0 1.4 0L10 10.1v7.9a1 1 0 0 0 2 0v-7.9l2.9 2.7a1 1 0 0 0 1.4-1.4l-4-3.7c-.4-.4-1-.4-1.4 0l-4 3.7a1 1 0 0 0 0 1.4z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
        </button>
      </div>

      <!-- Volume Control -->
      <div class="flex items-center gap-4 text-stone-700 dark:text-stone-300 mb-6">
        <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M11 5L6 9H2v6h4l5 4V5zm7.5 7c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM19 12c0 2.98-2.59 5.4-5.5 5.4v-10.8c2.91 0 5.5 2.42 5.5 5.4z"/>
        </svg>
        <input type="range" min="0" max="100" value="75" class="w-full h-1.5 rounded-lg appearance-none cursor-pointer bg-stone-400 dark:bg-stone-600 accent-amber-600 transition-colors duration-200">
        <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM19 12c0 2.98-2.59 5.4-5.5 5.4v-10.8c2.91 0 5.5 2.42 5.5 5.4z"/>
        </svg>
      </div>

      <!-- Social Interaction Buttons -->
      <div class="flex items-center justify-between mt-4">
        <button class="flex items-center gap-2 text-sm text-stone-700 dark:text-stone-300 px-4 py-2 rounded-full border border-stone-300 dark:border-stone-700 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          <span>Like</span>
        </button>
        <button class="flex items-center gap-2 text-sm text-stone-700 dark:text-stone-300 px-4 py-2 rounded-full border border-stone-300 dark:border-stone-700 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7 9h10V7H7v2zm0 4h10v-2H7v2zm0 4h7v-2H7v2z"/></svg>
          <span>Lyrics</span>
        </button>
        <button class="flex items-center gap-2 text-sm text-stone-700 dark:text-stone-300 px-4 py-2 rounded-full border border-stone-300 dark:border-stone-700 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 16.08c-.76 0-1.44.3-1.96.79l-4.57-2.7a3.5 3.5 0 0 0 0-1.59l4.57-2.7a2.99 2.99 0 0 0 1.96.79c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .17.02.34.05.51L10.3 11.2a3.48 3.48 0 0 0-2.3-1.28c-1.66 0-3 1.34-3 3s1.34 3 3 3c.89 0 1.7-.39 2.29-1.02l4.45 2.65c-.03.17-.05.34-.05.51 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/></svg>
          <span>Share</span>
        </button>
      </div>
    </div>

    <!-- Next Song Suggestion (for dating/social context) -->
    <div class="p-6 bg-stone-300 dark:bg-stone-800 border-t border-stone-400 dark:border-stone-700 flex items-center justify-between">
      <div class="flex items-center gap-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full object-cover shadow-md border-2 border-amber-600">
        <div>
          <p class="text-sm text-stone-700 dark:text-stone-300">Next from:</p>
          <p class="font-semibold text-stone-800 dark:text-stone-200">Alex R.</p>
        </div>
      </div>
      <button class="px-4 py-2 text-sm bg-amber-600 text-white rounded-full shadow-md hover:bg-amber-700 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500">
        Message
      </button>
    </div>

  </div>

</div>