Rechercher des composants

Catégories

Composants Lecteur audio

Lecteur audio

Interface pour la lecture de contenu audio

Composant de lecteur audio

Un composant de lecteur audio complexe et minimaliste avec une palette de couleurs rétro/vintage, conçu pour les plateformes de rencontres/sociales. Les fonctionnalités incluent les commandes de lecture, la barre de progression, le contrôle du volume, les informations sur les pistes et la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Retro_Gaming_Audio_Player

Un composant de lecteur audio à thème rétro/vintage conçu pour les sites Web de jeux, avec une palette de couleurs complémentaire, une mise en page réactive et une prise en charge du mode sombre. Il imite l’esthétique des années 80/90 avec un visuel de cassette.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-800 via-pink-700 to-orange-600 dark:from-gray-900 dark:via-gray-800 dark:to-black p-4">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-gray-700 to-gray-900 dark:from-gray-800 dark:to-gray-950 rounded-lg p-6 shadow-2xl border-4 border-gray-900 dark:border-gray-700 font-mono transform hover:scale-103 transition-transform duration-300 relative overflow-hidden">
    <!-- Top 'Display' Section -->
    <div class="h-16 w-full bg-gradient-to-r from-green-500 to-green-700 dark:from-green-700 dark:to-green-900 rounded-md mb-4 flex items-center justify-around">
      <div class="text-orange-300 dark:text-orange-500 text-sm sm:text-base font-bold tracking-widest">REC</div>
      <div class="text-orange-300 dark:text-orange-500 text-sm sm:text-base font-bold tracking-widest">PLAY</div>
      <div class="text-orange-300 dark:text-orange-500 text-sm sm:text-base font-bold tracking-widest">FF</div>
      <div class="text-orange-300 dark:text-orange-500 text-sm sm:text-base font-bold tracking-widest">REW</div>
    </div>

    <!-- Cassette Tape Area -->
    <div class="relative bg-gradient-to-br from-red-600 to-purple-800 dark:from-purple-800 dark:to-pink-900 rounded-lg p-4 mb-6 shadow-inner border-2 border-orange-500 dark:border-purple-600 flex justify-center items-center h-48 sm:h-56 md:h-64 lg:h-72 aspect-video">
      <!-- Cassette Spools -->
      <div class="absolute w-20 h-20 sm:w-24 sm:h-24 bg-gray-900 rounded-full border-4 border-red-400 dark:border-purple-300 top-1/2 -mt-10 sm:-mt-12 left-4 flex items-center justify-center animate-spin-slow">
        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-700 rounded-full"></div>
      </div>
      <div class="absolute w-20 h-20 sm:w-24 sm:h-24 bg-gray-900 rounded-full border-4 border-red-400 dark:border-purple-300 top-1/2 -mt-10 sm:-mt-12 right-4 flex items-center justify-center animate-spin-slow">
        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-700 rounded-full"></div>
      </div>
      <!-- Cassette Label/Display -->
      <div class="absolute w-2/3 h-2/3 bg-gray-200 dark:bg-gray-700 border-2 border-gray-500 dark:border-gray-900 rounded-md flex flex-col justify-center items-center p-2 text-center">
        <p class="text-xs sm:text-sm font-bold text-gray-800 dark:text-gray-200 uppercase tracking-wider mb-1">Game Mix '89</p>
        <p class="text-xxs sm:text-xs text-gray-600 dark:text-gray-400 mb-1">Track 03: 'Cyber Runner'</p>
        <div class="w-full h-2 bg-gray-400 dark:bg-gray-600 rounded-full relative overflow-hidden">
          <div class="absolute h-full bg-green-500 dark:bg-green-400" style="width: 65%;"></div>
        </div>
      </div>
    </div>

    <!-- Controls Grid -->
    <div class="grid grid-cols-3 gap-3 md:grid-cols-5 md:gap-4 lg:grid-cols-6 lg:gap-5">
      <button aria-label="Record" class="col-span-1 p-3 sm:p-4 bg-red-600 hover:bg-red-700 dark:bg-red-800 dark:hover:bg-red-900 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-red-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.75 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5zM12.75 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Play" class="col-span-1 p-3 sm:p-4 bg-green-600 hover:bg-green-700 dark:bg-green-800 dark:hover:bg-green-900 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-green-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.528 8.046a.75.75 0 00-.757-.107l-3.5 1.75A.75.75 0 005 10.37V15.5a.75.75 0 001.121.65l3.5-1.75a.75.75 0 00.107-.757L9.528 8.046z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Stop" class="col-span-1 p-3 sm:p-4 bg-gray-500 hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-800 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.75 7A.75.75 0 008 7.75v4.5a.75.75 0 001.5 0v-4.5A.75.75 0 008.75 7z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Previous Track" class="col-span-1 p-3 sm:p-4 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.79 5.23A.75.75 0 0113.75 6v8a.75.75 0 01-1.28.53l-3.5-4a.75.75 0 010-1.06l3.5-4a.75.75 0 01.54-.22zM7.5 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Next Track" class="col-span-1 p-3 sm:p-4 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.21 14.77A.75.75 0 016.25 14V6a.75.75 0 011.28-.53l3.5 4a.75.75 0 010 1.06l-3.5 4a.75.75 0 01-.54.22zM12.5 12.25a.75.75 0 001.5 0v-4.5a.75.75 0 00-1.5 0v4.5z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Eject" class="col-span-1 p-3 sm:p-4 bg-orange-500 hover:bg-orange-600 dark:bg-orange-700 dark:hover:bg-orange-800 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-orange-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.22 8.72a.75.75 0 000 1.06l.75.75a.75.75 0 001.06 0l.75-.75a.75.75 0 000-1.06l-.75-.75a.75.75 0 00-1.06 0l-.75.75zm9.56-.75a.75.75 0 00-1.06 0l-.75.75a.75.75 0 000 1.06l.75.75a.75.75 0 001.06 0l.75-.75a.75.75 0 000-1.06l-.75-.75zM10 18a8 8 0 100-16 8 8 0 000 16zM10 5a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 0010 5z" clip-rule="evenodd"></path></svg>
      </button>
    </div>

    <!-- Volume Slider (placeholder for functionality) -->
    <div class="mt-6">
      <label for="volume" class="block text-gray-200 dark:text-gray-400 text-sm mb-2 uppercase tracking-wide">Volume</label>
      <input type="range" id="volume" name="volume" min="0" max="100" value="70" class="w-full h-3 bg-gray-500 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer range-lg accent-orange-400 dark:accent-purple-400">
    </div>

    <!-- Small decorative lights/indicators -->
    <div class="absolute bottom-4 left-4 flex space-x-2">
      <div class="w-3 h-3 bg-red-400 dark:bg-red-600 rounded-full animate-pulse"></div>
      <div class="w-3 h-3 bg-yellow-400 dark:bg-yellow-600 rounded-full"></div>
    </div>

    <!-- Decorative grills -->
    <div class="absolute bottom-4 right-4 h-6 w-16 bg-gray-600 dark:bg-gray-800 rounded-full flex items-center justify-between px-2">
      <div class="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      <div class="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      <div class="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
    </div>
  </div>
</div>

<style>
  /* Custom spin animation for cassette spools */
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .animate-spin-slow {
    animation: spin-slow 3s linear infinite;
  }

  /* Custom range slider styling for retro feel */
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(to right, var(--tw-gradient-stops));
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    margin-top: -8px; /* Adjust for Firefox */
  }

  input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(to right, var(--tw-gradient-stops));
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: #6b7280; /* Tailwind gray-500 */
    border-radius: 3px;
  }

  .dark input[type="range"]::-webkit-slider-runnable-track {
    background: #4b5563; /* Tailwind gray-700 */
  }

  input[type="range"]::-moz-range-track {
    width: 100%;
    height: 4px;
    background: #6b7280; /* Tailwind gray-500 */
    border-radius: 3px;
  }

  .dark input[type="range"]::-moz-range-track {
    background: #4b5563; /* Tailwind gray-700 */
  }

  /* Tailwind's accent property for range input uses CSS custom properties.
     We define them here to ensure consistent color application for thumbs. */
  :root {
    --tw-accent-orange-400: #fbbf24;
    --tw-accent-purple-400: #a78bfa;
  }

  /* Apply solid color to these elements as they are not gradients */
  .accent-orange-400 {
    color: var(--tw-accent-orange-400);
  }
  .dark .accent-purple-400 {
    color: var(--tw-accent-purple-400);
  }
</style>

Composant de lecteur audio ludique

Un composant de lecteur audio simple et ludique avec des tons sépia/brun chauds, des éléments arrondis et une esthétique joyeuse. Inclut la prise en charge du mode sombre et est entièrement réactif pour les plates-formes de divertissement et de médias.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen p-4 bg-amber-50 dark:bg-stone-900">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl bg-amber-100 dark:bg-stone-800 text-stone-800 dark:text-stone-200 border-2 border-amber-200 dark:border-stone-700 transform transition-all duration-300 hover:scale-[1.01]">
    <div class="flex items-center space-x-4 mb-6">
      <div class="relative w-20 h-20 flex-shrink-0">
        <img src="https://picsum.photos/id/1080/200/200" alt="Album Art" class="rounded-full object-cover w-full h-full shadow-md border-2 border-amber-300 dark:border-stone-600">
        <div class="absolute inset-0 rounded-full ring-4 ring-amber-200 dark:ring-stone-700 animate-pulse"></div>
      </div>
      <div class="flex-1 min-w-0">
        <h3 class="text-xl font-bold truncate text-amber-900 dark:text-amber-100 mb-1">Groovy Tunes</h3>
        <p class="text-sm text-stone-600 dark:text-stone-400 truncate">By Awesome Artist</p>
      </div>
    </div>

    <div class="w-full flex items-center mb-6">
      <span class="text-xs text-stone-500 dark:text-stone-400 mr-2">0:45</span>
      <div class="flex-1 h-2 bg-amber-200 dark:bg-stone-700 rounded-full overflow-hidden relative">
        <div class="absolute top-0 left-0 h-full bg-amber-500 dark:bg-amber-600 rounded-full" style="width: 60%;"></div>
        <div class="absolute top-1/2 -mt-2 -mr-2 w-4 h-4 bg-amber-700 dark:bg-amber-400 rounded-full shadow-md" style="left: 60%; transform: translateX(-50%);"></div>
      </div>
      <span class="text-xs text-stone-500 dark:text-stone-400 ml-2">3:20</span>
    </div>

    <div class="flex justify-around items-center mb-4">
      <button class="p-3 rounded-full text-stone-600 dark:text-stone-400 hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="19 20 9 12 19 4 19 20"></polygon>
          <line x1="5" y1="19" x2="5" y2="5"></line>
        </svg>
      </button>
      <button class="p-4 rounded-full bg-amber-500 dark:bg-amber-600 text-white shadow-lg hover:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-200 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="5 3 19 12 5 21 5 3"></polygon>
        </svg>
      </button>
      <button class="p-3 rounded-full text-stone-600 dark:text-stone-400 hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="5 4 15 12 5 20 5 4"></polygon>
          <line x1="19" y1="5" x2="19" y2="19"></line>
        </svg>
      </button>
    </div>

    <div class="flex justify-between text-stone-500 dark:text-stone-400">
      <button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="2"></circle>
          <path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48 0a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="1" y1="3" x2="23" y2="21"></line>
          <path d="M15 5H9l-7 18h22L15 5z"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M7 21l-4-4V3.5a2.5 2.5 0 0 1 5 0V17l-4 4zM16.5 3.5a2.5 2.5 0 0 0-5 0V17l4 4 4-4V3.5z"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M22 17H2a4 4 0 0 1 4-4h12l4 4zM2 7h20a4 4 0 0 0-4-4H6l-4 4z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

Composant du lecteur audio Cyberpunk

Un composant de lecteur audio simple et réactif avec une esthétique cyberpunk futuriste utilisant une palette de couleurs violet/violet, adapté aux vitrines de portfolio. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-black p-4">
  <div class="w-full max-w-sm rounded-lg overflow-hidden shadow-2xl transform hover:scale-105 transition duration-300 ease-in-out bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-purple-950 dark:to-indigo-950 border border-purple-700 dark:border-indigo-800">
    <div class="relative">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Album Artwork">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
        <button class="p-4 rounded-full bg-purple-500 text-white shadow-lg transform hover:scale-110 active:scale-95 transition duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-400 focus:ring-opacity-75">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 5v14l11-7z"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="p-4 text-white">
      <h3 class="text-xl font-bold text-purple-200 dark:text-purple-300 mb-1">Neon Dreams</h3>
      <p class="text-sm text-purple-300 dark:text-purple-400">Synthwave Artist</p>

      <div class="mt-4">
        <div class="w-full bg-purple-800 rounded-full h-2.5 dark:bg-purple-900">
          <div class="bg-purple-400 h-2.5 rounded-full" style="width: 65%;"></div>
        </div>
        <div class="flex justify-between text-xs mt-2 text-purple-300 dark:text-purple-400">
          <span>0:45</span>
          <span>3:20</span>
        </div>
      </div>

      <div class="flex justify-around items-center mt-6 text-purple-300 dark:text-purple-400">
        <button class="p-2 focus:outline-none hover:text-purple-100 transition-colors duration-200">
          <svg class="w-6 h-6" 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 2zm-2 14.5v-9l6 4.5-6 4.5z"></path>
          </svg>
        </button>
        <button class="p-2 focus:outline-none hover:text-purple-100 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18V6h3v12H6zm5 0V6h3v12h-3zm5 0V6h3v12h-3z"></path>
          </svg>
        </button>
        <button class="p-2 focus:outline-none hover:text-purple-100 transition-colors duration-200">
          <svg class="w-6 h-6" 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 2zm2 14.5V9.5l-6 4.5 6 4.5z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Lecteur audio de luxe/premium

Un composant de lecteur audio simple et élégant conçu pour les forums ou les plates-formes communautaires, doté d’un style luxueux/premium avec une palette de couleurs automnale et une réactivité totale avec la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="max-w-md mx-auto p-4 md:p-6 rounded-xl shadow-xl bg-orange-50 dark:bg-zinc-800 transition-colors duration-300 transform hover:scale-[1.01] ease-in-out">
  <div class="flex items-center space-x-4">
    <div class="flex-shrink-0">
      <img class="h-16 w-16 rounded-lg object-cover shadow-md" src="https://picsum.photos/id/1047/100/100" alt="Album Art">
    </div>
    <div class="flex-1 min-w-0">
      <h3 class="text-lg md:text-xl font-serif text-amber-900 dark:text-orange-200 truncate">Autumn Leaves Melody</h3>
      <p class="text-sm md:text-base text-orange-700 dark:text-zinc-400 truncate">by <span class="font-medium">Elegant Soundscapes</span></p>
    </div>
  </div>

  <div class="mt-4">
    <input type="range" class="w-full h-1 bg-amber-200 rounded-lg appearance-none cursor-pointer accent-orange-700 dark:bg-zinc-600 dark:accent-orange-500" value="30" min="0" max="100">
    <div class="flex justify-between text-xs mt-1 text-orange-600 dark:text-zinc-400 font-mono">
      <span>0:30</span>
      <span>3:45</span>
    </div>
  </div>

  <div class="flex justify-center items-center mt-6 space-x-6">
    <button class="p-2 md:p-3 rounded-full text-orange-700 dark:text-orange-300 hover:bg-orange-100 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
      <svg class="w-6 h-6 md:w-7 md:h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.832L14.81 10.832a1 1 0 000-1.664L9.555 7.168z" clip-rule="evenodd"></path></svg>
      <span class="sr-only">Previous Track</span>
    </button>

    <button class="flex items-center justify-center p-3 md:p-4 rounded-full bg-orange-700 text-orange-50 shadow-lg hover:bg-orange-800 dark:bg-orange-600 dark:text-zinc-900 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
      <svg class="w-7 h-7 md:w-8 md:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.832L14.81 10.832a1 1 0 000-1.664L9.555 7.168z" clip-rule="evenodd"></path></svg>
      <span class="sr-only">Play/Pause</span>
    </button>

    <button class="p-2 md:p-3 rounded-full text-orange-700 dark:text-orange-300 hover:bg-orange-100 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
      <svg class="w-6 h-6 md:w-7 md:h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm5.293-9.293a1 1 0 00-1.414 0L10 11.586l-3.293-3.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg>
      <span class="sr-only">Next Track</span>
    </button>
  }

</div>

Composant Monospace Audio Player

Un composant de lecteur audio complexe et réactif conçu avec une esthétique monospace/développeur, adapté aux sites Web d’événements et de conférences. Comprend une barre de progression, des commandes et des informations sur les pistes avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8 font-mono bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-lg shadow-xl border border-gray-200 dark:border-gray-800">
  <div class="flex items-center justify-between mb-4">
    <h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">// Audio Stream</h2>
    <div class="flex items-center space-x-2 text-gray-600 dark:text-gray-400 text-sm sm:text-base">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13m-6 0V5a1 1 0 011-1h10a1 1 0 011 1v14a1 1 0 01-1 1H9a1 1 0 01-1-1zm6 0a1 1 0 001 1h10a1 1 0 001-1v-4a1 1 0 00-1-1H9a1 1 0 00-1 1V5a1 1 0 011-1h10a1 1 0 011 1v14a1 1 0 01-1 1H9a1 1 0 01-1-1z"></path></svg>
      <span>LIVE</span>
    </div>
  </div>

  <div class="flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-6 mb-6">
    <div class="w-24 h-24 sm:w-32 sm:h-32 flex-shrink-0 bg-gray-300 dark:bg-gray-700 rounded-md overflow-hidden border-2 border-gray-400 dark:border-gray-600">
      <img src="https://picsum.photos/id/1041/300/300" alt="Album Art" class="w-full h-full object-cover grayscale">
    </div>
    <div class="flex-grow text-center sm:text-left">
      <p class="text-xs text-blue-500 dark:text-blue-400 mb-1">// NOW PLAYING</p>
      <h3 class="text-lg sm:text-xl font-semibold mb-1 text-gray-900 dark:text-white">Conference Keynote: Future of Dev</h3>
      <p class="text-sm text-gray-700 dark:text-gray-300">Speaker: Dr. Ada Lovelace</p>
      <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Track ID: AXP-789-B23-DEV</p>
    </div>
  </div>

  <div class="mb-6">
    <div class="relative h-2 bg-gray-300 dark:bg-gray-700 rounded-full overflow-hidden">
      <div class="absolute top-0 left-0 h-full w-2/3 bg-blue-500 dark:bg-blue-400 rounded-full"></div>
      <div class="absolute top-1/2 left-[66%] -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-blue-600 dark:bg-blue-300 rounded-full shadow-md border-2 border-white dark:border-gray-900"></div>
    </div>
    <div class="flex justify-between text-xs mt-2 text-gray-600 dark:text-gray-400">
      <span>02:15</span>
      <span>08:42</span>
    </div>
  </div>

  <div class="flex items-center justify-center space-x-6 sm:space-x-8 text-gray-700 dark:text-gray-300">
    <button aria-label="Previous" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z"></path></svg>
    </button>
    <button aria-label="Play/Pause" class="p-3 bg-blue-500 dark:bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50">
      <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.027c.808-.474 1.847.166 1.847 1.112v3.662c0 .946-1.039 1.586-1.847 1.112L6.151 10.73c-.808-.474-.808-1.706 0-2.18l3.404-1.923z" clip-rule="evenodd"></path></svg>
    </button>
    <button aria-label="Next" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H6m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </button>
  </div>

  <div class="flex items-center justify-between mt-6 pt-4 border-t border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-400 text-sm">
    <div class="flex items-center space-x-2">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l.293-.293A1 1 0 017 8.586V7a1 1 0 011-1h.414l.293-.293A1 1 0 0110 5.414V4a1 1 0 011-1h1a1 1 0 011 1v.414a1 1 0 01.293.293L14.414 6H16a1 1 0 011 1v1.586a1 1 0 01-.293.707l-.293.293H15zm-2 2a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1h-4z"></path></svg>
      <span>Volume: 75%</span>
    </div>
    <p>// Stream Protocol v1.0</p>
  </div>
</div>

Glassmorphism, composant du lecteur audio

Un composant de lecteur audio simple et réactif de style glassmorphism avec une palette de couleurs violet/violet, conçu pour les applications industrielles/manufacturières. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant de lecteur audio

Un composant de lecteur audio simple et réactif avec un style de conception aquarelle/artistique, une palette de couleurs neutres chaudes et une prise en charge complète du mode sombre, adapté aux sites Web de conseil ou de service.

Ouvrir Aperçu

                <div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-stone-800 dark:to-stone-900 font-sans antialiased min-h-screen flex items-center justify-center">
  <div class="w-full max-w-sm mx-auto rounded-3xl shadow-xl overflow-hidden
              bg-gradient-to-br from-white via-stone-50 to-stone-100 
              dark:from-stone-700 dark:via-stone-750 dark:to-stone-800
              transform transition-all duration-300 hover:scale-[1.01]
              border border-stone-200 dark:border-stone-600">
    <div class="p-6 space-y-4 relative overflow-hidden">
      <div class="absolute inset-0 bg-no-repeat bg-center opacity-30 dark:opacity-10" 
           style="background-image: url('https://picsum.photos/seed/watercolor/600/400?blur=5&grayscale'); background-size: cover; filter: saturate(0.5);">
      </div>
      
      <div class="relative z-10 flex flex-col items-center">
        <div class="w-24 h-24 rounded-full overflow-hidden shadow-md border-4 border-stone-100 dark:border-stone-600">
          <img src="https://picsum.photos/seed/consulting/150/150" alt="Podcast Thumbnail" class="w-full h-full object-cover grayscale opacity-90">
        </div>
        <h3 class="mt-4 text-xl font-semibold text-stone-800 dark:text-stone-100 text-center">
          Understanding Client Needs
        </h3>
        <p class="text-sm text-stone-600 dark:text-stone-300 text-center">
          Episode 01: The Consulting Journey
        </p>
      </div>

      <div class="relative z-10 space-y-4">
        <div class="w-full h-2 bg-stone-200 dark:bg-stone-600 rounded-full overflow-hidden relative">
          <div class="absolute top-0 left-0 h-full bg-orange-300 dark:bg-orange-500 rounded-full" style="width: 40%;"></div>
          <div class="absolute top-1/2 left-[40%] -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rounded-full shadow-lg"></div>
        </div>
        <div class="flex justify-between text-xs text-stone-500 dark:text-stone-400">
          <span>0:45</span>
          <span>2:30</span>
        </div>
      </div>

      <div class="relative z-10 flex justify-center items-center gap-6">
        <button class="p-2 text-stone-600 dark:text-stone-300 rounded-full hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500">
          <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v1a8 8 0 0015.356 2m-.001-2H12m13 0l-5 5-5-5" />
          </svg>
        </button>
        <button class="p-3 bg-orange-400 dark:bg-orange-600 text-white rounded-full shadow-lg 
                       hover:bg-orange-500 dark:hover:bg-orange-500 transition-colors 
                       focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" 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 class="p-2 text-stone-600 dark:text-stone-300 rounded-full hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500">
          <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v1a8 8 0 0015.356 2m-.001-2H12m13 0l-5 5-5-5" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Composant de lecteur audio

Un composant de lecteur audio réactif avec un design inspiré du papier/de l’impression, une palette de couleurs neutres et froides, une prise en charge du mode sombre et des fonctionnalités interactives adaptées aux plates-formes de divertissement et de médias.

Ouvrir Aperçu

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

  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
              border border-gray-200 dark:border-gray-700
              transform transition-all duration-300 ease-in-out
              hover:shadow-2xl hover:-translate-y-1
              print-paper-effect relative">

    <!-- Page Curl / Fold Effect (Visual detail for paper feel) -->
    <div class="absolute top-0 right-0 w-16 h-16 bg-gray-50 dark:bg-gray-700 rounded-bl-lg opacity-75" style="clip-path: polygon(100% 0, 0 0, 100% 100%);"></div>
    <div class="absolute top-0 right-0 w-16 h-16 bg-gray-100 dark:bg-gray-900 rounded-bl-lg" style="clip-path: polygon(100% 0, 70% 0, 100% 30%);"></div>

    <!-- Album Art Section -->
    <div class="relative w-full h-64 overflow-hidden rounded-t-lg border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/600/400?random=1" alt="Album Art" class="w-full h-full object-cover object-center filter grayscale-0 dark:filter-none">
      <div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
      <div class="absolute bottom-4 left-4 text-white p-2 rounded-md">
        <h3 class="text-xl font-bold mb-1 drop-shadow-lg">Ephemeral Echoes</h3>
        <p class="text-sm text-gray-200 drop-shadow-md">Luna & The Celestial Tides</p>
      </div>
    </div>

    <!-- Controls Section -->
    <div class="p-6 space-y-4">

      <!-- Playback Progress Bar -->
      <div class="w-full flex items-center space-x-2 text-gray-600 dark:text-gray-400">
        <span class="text-xs font-medium min-w-[30px]">0:45</span>
        <div class="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden relative cursor-pointer">
          <div class="h-full bg-blue-500 dark:bg-blue-400 rounded-full" style="width: 30%;"></div>
          <!-- Draggable thumb (illustrative) -->
          <div class="absolute h-4 w-4 bg-white dark:bg-gray-300 rounded-full shadow border-2 border-blue-500 dark:border-blue-400 -translate-y-1/2 top-1/2 left-[30%] -ml-2"></div>
        </div>
        <span class="text-xs font-medium min-w-[30px]">3:20</span>
      </div>

      <!-- Main Playback Buttons -->
      <div class="flex items-center justify-center space-x-6 text-gray-700 dark:text-gray-300">
        <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200" aria-label="Previous">
          <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="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
          </svg>
        </button>
        <button class="p-4 bg-blue-500 dark:bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 transition-all duration-200" aria-label="Play/Pause">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
        <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200" aria-label="Next">
          <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="M13 5l7 7-7 7M6 5l7 7-7 7" />
          </svg>
        </button>
      </div>

      <!-- Secondary Controls -->
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 pt-4 border-t border-dashed border-gray-300 dark:border-gray-600">
        <button class="flex items-center space-x-1 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 text-sm" aria-label="Shuffle">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12V8m5.416-3a8.001 8.001 0 0115.356 2m-1.879 11H18V9m3 3L15 9m3 9l3 3"/></svg>
          <span class="hidden sm:inline">Shuffle</span>
        </button>

        <div class="flex items-center space-x-4">
          <!-- Volume Control -->
          <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="Volume">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.536 8.464A5 5 0 0117 12h2a7 7 0 00-1.745-4.37A9.001 9.001 0 0121 12h2a11.001 11.001 0 00-2.825-6.879L18 6l-2.464-2.464zM9 6H4a1 1 0 00-1 1v10a1 1 0 001 1h5l4 4V2l-4 4z" />
            </svg>
          </button>
          <!-- Current Playback Mode (Loop/Repeat) -->
          <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="Repeat">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
            </svg>
          </button>
          <!-- More Options / Playlist -->
          <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="More Options">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
            </svg>
          </button>
        </div>
      </div>
    </div>

  </div>

</div>

<style>
  /* This is for the 'paper-like' effect */
  .print-paper-effect {
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* Simulating a subtle texture and shadow */
  }

  /* Optional: Add a very subtle grain/texture if feasible without extra elements */
  /* For a true paper look, a background image or SVG filter would be ideal, but out of scope for pure HTML/TW */
  /* .print-paper-effect::before {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0; bottom: 0;
     background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuMDcwMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDEyOCwxMjgsMTI4LDAuMDgpIiBzdHJva2Utd2lkdGg9IjEuMjUiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48L3BhdHRlcm4+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuMDcwMikvIj48L3N2Z2c+');
     opacity: 0.2;
     pointer-events: none;
     z-index: 0;
  } */
</style>

Memphis_Audio_Player_Component

Un composant de lecteur audio réactif inspiré du design de Memphis, avec des formes géométriques audacieuses et des couleurs neutres chaudes, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-stone-100 to-amber-50 dark:from-stone-900 dark:to-stone-800 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto rounded-3xl shadow-xl overflow-hidden relative border-4 border-stone-200 dark:border-stone-700 bg-amber-50 dark:bg-stone-900 animate-fade-in">

    <!-- Decorative Memphis Shapes -->
    <div class="absolute -top-8 -left-8 w-24 h-24 bg-rose-300 dark:bg-rose-700 rounded-full opacity-70 rotate-12"></div>
    <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-lime-300 dark:bg-lime-700 rounded-full opacity-70 -rotate-45"></div>
    <div class="absolute top-1/4 left-0 w-16 h-16 bg-sky-300 dark:bg-sky-700 transform -translate-x-1/2 rotate-90"></div>
    <div class="absolute bottom-1/3 right-0 w-20 h-20 bg-fuchsia-300 dark:bg-fuchsia-700 transform translate-x-1/2 -rotate-12"></div>
    <div class="absolute top-qtr right-1/4 w-12 h-12 bg-orange-300 dark:bg-orange-700 rounded-lg opacity-80 rotate-45"></div>

    <div class="relative p-6 sm:p-8 lg:p-10 z-10">

      <!-- Header / Album Art -->
      <div class="flex flex-col items-center mb-6 sm:mb-8">
        <div class="w-40 h-40 sm:w-48 sm:h-48 rounded-2xl overflow-hidden shadow-lg border-4 border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 ease-in-out">
          <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-stone-900 dark:text-stone-100 mt-5 mb-1 text-center font-serif leading-tight">Groovy Synthwave Hits</h3>
        <p class="text-stone-600 dark:text-stone-400 text-lg sm:text-xl font-medium text-center font-sans tracking-wide">The Retro Beats</p>
      </div>

      <!-- Progress Bar -->
      <div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-3 sm:h-4 mb-5 sm:mb-6 relative">
        <div class="bg-rose-500 rounded-full h-full w-2/3 shadow-md"></div>
        <div class="absolute -top-1 right-1/3 w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-rose-500 border-2 border-stone-50 dark:border-stone-900 shadow-lg cursor-grab hover:scale-110 transition-transform duration-200"></div>
      </div>
      <div class="flex justify-between text-sm sm:text-base text-stone-500 dark:text-stone-400 mb-8 sm:mb-10">
        <span>2:45</span>
        <span>-1:15</span>
      </div>

      <!-- Controls -->
      <div class="grid grid-cols-5 items-center gap-4 text-stone-800 dark:text-stone-200">
        <button class="col-span-1 flex items-center justify-center p-2 rounded-xl bg-orange-200 dark:bg-orange-700 bg-opacity-70 dark:bg-opacity-70 hover:bg-orange-300 dark:hover:bg-orange-600 focus:outline-none focus:ring-4 focus:ring-orange-300 focus:ring-opacity-50 transition-colors duration-200 group">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M11 18V6l-8 6 8 6zm3.29-1.39L18 12l-3.71-4.61C14.1 6.57 15.03 6 16 6h1c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1h-1c-.97 0-1.9-.57-2.71-1.39z"/></svg>
          <span class="sr-only">Previous Track</span>
        </button>
        <button class="col-span-1 flex items-center justify-center p-2 rounded-xl bg-sky-200 dark:bg-sky-700 bg-opacity-70 dark:bg-opacity-70 hover:bg-sky-300 dark:hover:bg-sky-600 focus:outline-none focus:ring-4 focus:ring-sky-300 focus:ring-opacity-50 transition-colors duration-200 group">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24"><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.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
          <span class="sr-only">Volume</span>
        </button>

        <button class="col-span-1 flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-rose-500 text-white shadow-lg border-4 border-stone-50 dark:border-stone-900 transform hover:scale-110 focus:outline-none focus:ring-4 focus:ring-rose-300 focus:ring-opacity-70 transition-all duration-300 group -mt-4">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 group-hover:rotate-6 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
          <span class="sr-only">Play/Pause</span>
        </button>

        <button class="col-span-1 flex items-center justify-center p-2 rounded-xl bg-sky-200 dark:bg-sky-700 bg-opacity-70 dark:bg-opacity-70 hover:bg-sky-300 dark:hover:bg-sky-600 focus:outline-none focus:ring-4 focus:ring-sky-300 focus:ring-opacity-50 transition-colors duration-200 group">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/></svg>
          <span class="sr-only">Repeat</span>
        </button>
        <button class="col-span-1 flex items-center justify-center p-2 rounded-xl bg-orange-200 dark:bg-orange-700 bg-opacity-70 dark:bg-opacity-70 hover:bg-orange-300 dark:hover:bg-orange-600 focus:outline-none focus:ring-4 focus:ring-orange-300 focus:ring-opacity-50 transition-colors duration-200 group">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M13 6v14l8-6-8-8zM6.71 16.39L6 18c.97 0 1.9.57 2.71 1.39C9.9 20.43 10.83 21 11.72 21H12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1h-.28c-.89 0-1.82.57-2.71 1.39S6.9 6.57 6 7.61L6.71 6.39l-3.71 4.61L6 12l-3.71-4.61z"/></svg>
          <span class="sr-only">Next Track</span>
        </button>
      </div>

    </div>
  </div>
</div>

<style>
  /* Add custom keyframes for entry animation */
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
  }
</style>