Componente de reproductor de audio lúdico
Un componente de reproducción de audio simple y divertido con cálidos tonos sepia/marrones, elementos redondeados y una estética alegre. Incluye soporte para modo oscuro y es totalmente sensible para plataformas de entretenimiento y medios.
Código HTML
<div class="flex items-center justify-center min-h-screen p-4 bg-amber-50 dark:bg-stone-900">
<div class="w-full max-w-sm p-6 rounded-3xl shadow-xl bg-amber-100 dark:bg-stone-800 text-stone-800 dark:text-stone-200 border-2 border-amber-200 dark:border-stone-700 transform transition-all duration-300 hover:scale-[1.01]">
<div class="flex items-center space-x-4 mb-6">
<div class="relative w-20 h-20 flex-shrink-0">
<img src="https://picsum.photos/id/1080/200/200" alt="Album Art" class="rounded-full object-cover w-full h-full shadow-md border-2 border-amber-300 dark:border-stone-600">
<div class="absolute inset-0 rounded-full ring-4 ring-amber-200 dark:ring-stone-700 animate-pulse"></div>
</div>
<div class="flex-1 min-w-0">
<h3 class="text-xl font-bold truncate text-amber-900 dark:text-amber-100 mb-1">Groovy Tunes</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 truncate">By Awesome Artist</p>
</div>
</div>
<div class="w-full flex items-center mb-6">
<span class="text-xs text-stone-500 dark:text-stone-400 mr-2">0:45</span>
<div class="flex-1 h-2 bg-amber-200 dark:bg-stone-700 rounded-full overflow-hidden relative">
<div class="absolute top-0 left-0 h-full bg-amber-500 dark:bg-amber-600 rounded-full" style="width: 60%;"></div>
<div class="absolute top-1/2 -mt-2 -mr-2 w-4 h-4 bg-amber-700 dark:bg-amber-400 rounded-full shadow-md" style="left: 60%; transform: translateX(-50%);"></div>
</div>
<span class="text-xs text-stone-500 dark:text-stone-400 ml-2">3:20</span>
</div>
<div class="flex justify-around items-center mb-4">
<button class="p-3 rounded-full text-stone-600 dark:text-stone-400 hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="19 20 9 12 19 4 19 20"></polygon>
<line x1="5" y1="19" x2="5" y2="5"></line>
</svg>
</button>
<button class="p-4 rounded-full bg-amber-500 dark:bg-amber-600 text-white shadow-lg hover:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-200 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
</button>
<button class="p-3 rounded-full text-stone-600 dark:text-stone-400 hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="5 4 15 12 5 20 5 4"></polygon>
<line x1="19" y1="5" x2="19" y2="19"></line>
</svg>
</button>
</div>
<div class="flex justify-between text-stone-500 dark:text-stone-400">
<button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="2"></circle>
<path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48 0a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path>
</svg>
</button>
<button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="1" y1="3" x2="23" y2="21"></line>
<path d="M15 5H9l-7 18h22L15 5z"></path>
</svg>
</button>
<button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M7 21l-4-4V3.5a2.5 2.5 0 0 1 5 0V17l-4 4zM16.5 3.5a2.5 2.5 0 0 0-5 0V17l4 4 4-4V3.5z"></path>
</svg>
</button>
<button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 17H2a4 4 0 0 1 4-4h12l4 4zM2 7h20a4 4 0 0 0-4-4H6l-4 4z"></path>
</svg>
</button>
</div>
</div>
</div>Componentes relacionados
Componente de reproductor de audio monoespaciado
Un componente de reproductor de audio complejo y receptivo diseñado con una estética monoespaciada/de desarrollador, adecuado para sitios web de eventos y conferencias. Cuenta con una barra de progreso, controles e información de pista con soporte para modo oscuro.
Componente del reproductor de audio
Un componente de reproductor de audio simple y receptivo con un estilo de diseño artístico / acuarela, combinación de colores cálidos y neutros y soporte completo para el modo oscuro, adecuado para sitios web de consultoría o basados en servicios.
Componente del reproductor de audio Bauhaus
Un componente de reproductor de audio complejo y sensible diseñado con los principios de la Bauhaus para aplicaciones deportivas y de fitness, con una base en blanco y negro con un llamativo color de acento. Incluye controles de reproducción, barra de progreso, control de volumen, lista de pistas y compatibilidad con el modo oscuro.