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.
HTML Code
<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>Composants associés
Lecteur audio neumorphe
Un composant simple de lecteur audio neumorphe avec un schéma de couleurs Earth Tones pour un tableau de bord, construit avec Tailwind CSS. Il prend en charge le design réactif et le thème sombre.
Composant de lecteur audio
Un composant de lecteur audio brutaliste avec une palette de couleurs triadique et une complexité modérée, adapté à un tableau de bord. Il présente un design réactif avec la prise en charge du thème sombre, mis en œuvre avec Tailwind CSS.