Composant de lecteur audio
Un composant de lecteur audio réactif avec un design inspiré du papier/de l’impression, une palette de couleurs neutres et froides, une prise en charge du mode sombre et des fonctionnalités interactives adaptées aux plates-formes de divertissement et de médias.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
border border-gray-200 dark:border-gray-700
transform transition-all duration-300 ease-in-out
hover:shadow-2xl hover:-translate-y-1
print-paper-effect relative">
<!-- Page Curl / Fold Effect (Visual detail for paper feel) -->
<div class="absolute top-0 right-0 w-16 h-16 bg-gray-50 dark:bg-gray-700 rounded-bl-lg opacity-75" style="clip-path: polygon(100% 0, 0 0, 100% 100%);"></div>
<div class="absolute top-0 right-0 w-16 h-16 bg-gray-100 dark:bg-gray-900 rounded-bl-lg" style="clip-path: polygon(100% 0, 70% 0, 100% 30%);"></div>
<!-- Album Art Section -->
<div class="relative w-full h-64 overflow-hidden rounded-t-lg border-b border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/600/400?random=1" alt="Album Art" class="w-full h-full object-cover object-center filter grayscale-0 dark:filter-none">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
<div class="absolute bottom-4 left-4 text-white p-2 rounded-md">
<h3 class="text-xl font-bold mb-1 drop-shadow-lg">Ephemeral Echoes</h3>
<p class="text-sm text-gray-200 drop-shadow-md">Luna & The Celestial Tides</p>
</div>
</div>
<!-- Controls Section -->
<div class="p-6 space-y-4">
<!-- Playback Progress Bar -->
<div class="w-full flex items-center space-x-2 text-gray-600 dark:text-gray-400">
<span class="text-xs font-medium min-w-[30px]">0:45</span>
<div class="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden relative cursor-pointer">
<div class="h-full bg-blue-500 dark:bg-blue-400 rounded-full" style="width: 30%;"></div>
<!-- Draggable thumb (illustrative) -->
<div class="absolute h-4 w-4 bg-white dark:bg-gray-300 rounded-full shadow border-2 border-blue-500 dark:border-blue-400 -translate-y-1/2 top-1/2 left-[30%] -ml-2"></div>
</div>
<span class="text-xs font-medium min-w-[30px]">3:20</span>
</div>
<!-- Main Playback Buttons -->
<div class="flex items-center justify-center space-x-6 text-gray-700 dark:text-gray-300">
<button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200" aria-label="Previous">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
</svg>
</button>
<button class="p-4 bg-blue-500 dark:bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 transition-all duration-200" aria-label="Play/Pause">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
<button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200" aria-label="Next">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M6 5l7 7-7 7" />
</svg>
</button>
</div>
<!-- Secondary Controls -->
<div class="flex items-center justify-between text-gray-600 dark:text-gray-400 pt-4 border-t border-dashed border-gray-300 dark:border-gray-600">
<button class="flex items-center space-x-1 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 text-sm" aria-label="Shuffle">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12V8m5.416-3a8.001 8.001 0 0115.356 2m-1.879 11H18V9m3 3L15 9m3 9l3 3"/></svg>
<span class="hidden sm:inline">Shuffle</span>
</button>
<div class="flex items-center space-x-4">
<!-- Volume Control -->
<button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="Volume">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.536 8.464A5 5 0 0117 12h2a7 7 0 00-1.745-4.37A9.001 9.001 0 0121 12h2a11.001 11.001 0 00-2.825-6.879L18 6l-2.464-2.464zM9 6H4a1 1 0 00-1 1v10a1 1 0 001 1h5l4 4V2l-4 4z" />
</svg>
</button>
<!-- Current Playback Mode (Loop/Repeat) -->
<button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="Repeat">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
</button>
<!-- More Options / Playlist -->
<button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="More Options">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" 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" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<style>
/* This is for the 'paper-like' effect */
.print-paper-effect {
position: relative;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
/* Simulating a subtle texture and shadow */
}
/* Optional: Add a very subtle grain/texture if feasible without extra elements */
/* For a true paper look, a background image or SVG filter would be ideal, but out of scope for pure HTML/TW */
/* .print-paper-effect::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuMDcwMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDEyOCwxMjgsMTI4LDAuMDgpIiBzdHJva2Utd2lkdGg9IjEuMjUiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48L3BhdHRlcm4+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuMDcwMikvIj48L3N2Z2c+');
opacity: 0.2;
pointer-events: none;
z-index: 0;
} */
</style>Composants associés
Glassmorphism, composant du lecteur audio
Un composant de lecteur audio simple et réactif de style glassmorphism avec une palette de couleurs violet/violet, conçu pour les applications industrielles/manufacturières. Inclut la prise en charge du mode sombre.
Lecteur audio skeuomorphe
Un composant de lecteur audio conçu avec un style Skeuomorphic, une palette de couleurs pastel et une interface complexe. Il prend en charge le mode sombre et est réactif, adapté aux sites de commerce électronique.
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.