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.
HTML Code
<div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/100" alt="Album Art" class="rounded-lg mb-4">
<div class="flex flex-col items-center">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Song Title</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">Artist Name</p>
</div>
<div class="w-full my-4">
<input type="range" class="w-full h-1 bg-gray-300 rounded-lg appearance-none cursor-pointer dark:bg-gray-600" min="0" max="100" value="50">
</div>
<div class="flex justify-between">
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none">Play</button>
<button class="bg-red-500 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none">Stop</button>
</div>
</div>
</div>Composants associés
Glassmorphism, composant du lecteur audio
Un composant de lecteur audio complexe, conçu pour les interfaces industrielles/industrielles, avec des couleurs à contraste élevé, une réactivité totale et une prise en charge du 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.
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.