Composants Lecteur audio Composant du lecteur audio Bauhaus

Composant du lecteur audio Bauhaus

Un composant de lecteur audio complexe et réactif conçu selon les principes du Bauhaus pour les applications de sport/fitness, avec une base en noir et blanc avec une couleur d’accentuation frappante. Comprend les commandes de lecture, la barre de progression, le contrôle du volume, la liste des pistes et la prise en charge du mode sombre.

Aperçu

HTML Code

<div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-none overflow-hidden border-2 border-gray-900 dark:border-gray-100 transition-all duration-300 ease-in-out">
    <!-- Header / Top Section -->
    <div class="flex items-center justify-between p-4 sm:p-6 bg-yellow-400 dark:bg-yellow-600 border-b-2 border-gray-900 dark:border-gray-100 relative">
      <h2 class="text-xl sm:text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-gray-900 uppercase tracking-wider">
        Pro Workout Mix
      </h2>
      <button class="p-2 sm:p-3 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-105 active:scale-95 transition-transform">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
      </button>
      <div class="absolute top-0 right-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -mr-1 -mt-1"></div>
    </div>

    <div class="grid md:grid-cols-3">
      <!-- Left Section: Album Art & Currently Playing -->
      <div class="md:col-span-1 p-4 sm:p-6 bg-gray-50 dark:bg-gray-700 border-b-2 md:border-b-0 md:border-r-2 border-gray-900 dark:border-gray-100 relative">
        <div class="aspect-w-1 aspect-h-1 mb-4 flex items-center justify-center bg-gray-300 dark:bg-gray-600 border-2 border-gray-900 dark:border-gray-100 relative group">
          <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="object-cover w-full h-full p-2 block filter grayscale transition-all duration-300 group-hover:grayscale-0 group-hover:p-0">
          <div class="absolute top-0 left-0 w-full h-full border-4 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute top-0 left-0 w-full h-full bg-yellow-400 dark:bg-yellow-600 opacity-10 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="text-center">
          <p class="text-lg sm:text-xl font-bold uppercase text-gray-900 dark:text-gray-100 mb-1">Push It To The Limit</p>
          <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300">Turbo Beats Feat. Fitness Flow</p>
        </div>
        <div class="absolute bottom-0 right-0 w-6 h-6 sm:w-8 sm:h-8 bg-gray-900 dark:bg-gray-100 -mr-1 -mb-1"></div>
      </div>

      <!-- Middle Section: Controls & Progress -->
      <div class="md:col-span-2 p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 relative">

        <!-- Progress Bar -->
        <div class="w-full mb-6 relative">
          <div class="h-2 bg-gray-300 dark:bg-gray-700 border border-gray-900 dark:border-gray-100 relative">
            <div class="absolute h-full bg-yellow-400 dark:bg-yellow-600" style="width: 60%;"></div>
            <div class="absolute -mt-1 -ml-1 h-4 w-4 bg-gray-900 dark:bg-gray-100 border-2 border-yellow-400 dark:border-yellow-600" style="left: 60%; transform: translateX(-50%);"></div>
          </div>
          <div class="flex justify-between text-xs mt-2 text-gray-700 dark:text-gray-300">
            <span>2:35</span>
            <span>-1:45</span>
          </div>
        </div>

        <!-- Main Controls -->
        <div class="flex justify-center items-center space-x-4 sm:space-x-6 mb-8">

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.793 4.793a1 1 0 011.414 0L10 8.586l3.793-3.793a1 1 0 111.414 1.414L11.414 10l3.793 3.793a1 1 0 01-1.414 1.414L10 11.414l-3.793 3.793a1 1 0 01-1.414-1.414L8.586 10 4.793 6.207a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20"><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.832L12.744 10l-3.189-2.832z" clip-rule="evenodd"></path></svg>
             <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M15.207 4.793a1 1 0 010 1.414L11.414 10l3.793 3.793a1 1 0 01-1.414 1.414L10 11.414l-3.793 3.793a1 1 0 01-1.414-1.414L8.586 10 4.793 6.207a1 1 0 011.414-1.414L10 8.586l3.793-3.793a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
             <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>
        </div>

        <!-- Volume Control -->
        <div class="flex items-center justify-center space-x-2 text-gray-700 dark:text-gray-300 mb-6">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.383 5.498a1 1 0 10-1.766-.996L4 7H3a2 2 0 00-2 2v2a2 2 0 002 2h1l3.617 1.502a1 1 0 101.766-.996L6.853 10l2.53-1.055zM14.004 7.253a1 1 0 00-1.748-.686 4.002 4.002 0 010 6.866 1 1 0 001.748-.686 2.002 2.002 0 000-3.494z" clip-rule="evenodd"></path></svg>
          <input type="range" class="w-32 bg-gray-300 dark:bg-gray-700 h-2 accent-yellow-400 dark:accent-yellow-600 border border-gray-900 dark:border-gray-100 outline-none hover:outline-none focus:outline-none" value="70">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.383 5.498a1 1 0 10-1.766-.996L4 7H3a2 2 0 00-2 2v2a2 2 0 002 2h1l3.617 1.502a1 1 0 101.766-.996L6.853 10l2.53-1.055zM14.004 7.253a1 1 0 00-1.748-.686 4.002 4.002 0 010 6.866 1 1 0 001.748-.686 2.002 2.002 0 000-3.494zM16.924 3.078a1 1 0 00-1.088 1.636 7.004 7.004 0 010 10.572 1 1 0 001.088 1.636 9.004 9.004 0 000-13.844z" clip-rule="evenodd"></path></svg>
        </div>

        <div class="absolute bottom-0 left-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -ml-1 -mb-1"></div>
      </div>

      <!-- Right Section: Track List -->
      <div class="md:col-span-3 p-4 sm:p-6 bg-gray-50 dark:bg-gray-700 border-t-2 border-gray-900 dark:border-gray-100 relative">
        <h3 class="text-lg sm:text-xl font-bold uppercase text-gray-900 dark:text-gray-100 mb-4">
          Playlist Tracks
        </h3>
        <ul class="space-y-3">
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-yellow-400 dark:hover:border-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">01</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Push It To The Limit</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Turbo Beats Feat. Fitness Flow</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">4:20</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">02</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Adrenaline Rush Zone</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Synth Pulse</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">3:55</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">03</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Endurance Max</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Power Drifters</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">5:10</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">04</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Beat Drop Blitz</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Rhythmic Force Inc.</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">3:40</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">05</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Victory Lap Anthem</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">The Finish Line Project</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">4:50</span>
          </li>
        </ul>
        <div class="absolute top-0 left-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -ml-1 -mt-1"></div>
      </div>
    </div>
  </div>
</div>

Composants associés

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

Composant de lecteur audio

Un composant de lecteur audio réactif conçu en mode sombre à l’aide de Tailwind CSS. Il prend en charge le thème sombre et fournit une interface propre pour la lecture audio.

Ouvrir

Lecteur audio Memphis Earth-toned

Un composant de lecteur audio modérément complexe conçu dans un style inspiré de Memphis avec une palette de couleurs terre, adapté à la documentation ou aux sites wiki. Présente des formes géométriques audacieuses, des motifs ludiques et une réactivité totale avec la prise en charge du mode sombre.

Ouvrir