Composant de lecteur audio
Composant de lecteur audio en mode sombre
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 de lecteur audio
Un composant de lecteur audio simple conçu avec un style skeuomorphe, utilisant une palette de couleurs en niveaux de gris et prenant en charge le mode sombre.
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.
3D_Forest_Audio_Player
Un composant de lecteur audio réactif avec des éléments de conception 3D, utilisant une palette de couleurs forêt/vert, adapté aux plates-formes éducatives prenant en charge le mode sombre.