Composants Lecteur audio Composant de lecteur audio

Composant de lecteur audio

Composant de lecteur audio en mode sombre

Aperçu

HTML Code

<div class="flex items-center justify-center min-h-screen bg-gray-900">
  <div class="container p-6 bg-gray-800 rounded-lg shadow-xl">
    <div class="flex items-center justify-between mb-6">
      <div class="flex items-center">
        <img class="w-12 h-12 mr-4 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Album Art">
        <div>
          <h3 class="text-lg font-semibold text-white">Song Title</h3>
          <p class="text-sm text-gray-400">Artist Name</p>
        </div>
      </div>
      <button class="text-gray-400 hover:text-white focus:outline-none">
        <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="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"></path></svg>
      </button>
    </div>
    <div class="mb-4">
      <div class="flex items-center justify-between text-gray-400">
        <span class="text-xs">0:00</span>
        <span class="text-xs">3:45</span>
      </div>
      <div class="w-full h-2 bg-gray-700 rounded-full">
        <div class="h-2 bg-red-500 rounded-full" style="width: 25%;"></div>
      </div>
    </div>
    <div class="flex items-center justify-center space-x-6">
      <button class="text-gray-400 hover:text-white focus:outline-none">
        <svg class="w-8 h-8" 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.75 17.25L10.5 12l5.25-5.25"></path></svg>
      </button>
      <button class="flex items-center justify-center w-12 h-12 text-gray-900 bg-white rounded-full hover:bg-gray-200 focus:outline-none">
        <svg class="w-6 h-6" 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.832L12.364 10 9.555 7.168z" clip-rule="evenodd"></path></svg>
      </button>
      <button class="text-gray-400 hover:text-white focus:outline-none">
        <svg class="w-8 h-8" 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 17.25L14.25 12 9 6.75"></path></svg>
      </button>
    </div>
  </div>
</div>

Composants associés

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

Composant de lecteur audio

Un composant de lecteur audio réactif conçu dans le style Glassmorphism, avec un aspect semblable à du verre dépoli et la prise en charge du mode sombre.

Ouvrir

Composant de lecteur audio

Un composant de lecteur audio complexe conçu pour un tableau de bord, doté d’un design réactif, d’une prise en charge des thèmes sombres et de micro-interactions attrayantes.

Ouvrir