Componente del reproductor de audio
Un componente de reproductor de audio simple diseñado con un estilo skeuomórfico, que utiliza un esquema de color en escala de grises y admite el modo oscuro.
Código HTML
<div class="bg-gray-900 text-white p-4 rounded-lg shadow-lg max-w-xs mx-auto dark:bg-gray-800">
<div class="flex items-center justify-between mb-2">
<img src="https://picsum.photos/80/80" alt="Album Cover" class="rounded-lg shadow-md"/>
<div class="flex flex-col">
<h4 class="text-xl font-semibold">Track Title</h4>
<p class="text-gray-400">Artist Name</p>
</div>
</div>
<audio controls class="w-full">
<source src="audio-file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="flex justify-between mt-2">
<button class="bg-gray-700 hover:bg-gray-600 text-white rounded-full p-2">
⏮
</button>
<button class="bg-gray-700 hover:bg-gray-600 text-white rounded-full p-2">
Play
</button>
<button class="bg-gray-700 hover:bg-gray-600 text-white rounded-full p-2">
⏭
</button>
</div>
</div>Componentes relacionados
Componente del reproductor de audio Cyberpunk
Un componente de reproducción de audio simple y receptivo con una estética cyberpunk futurista que utiliza un esquema de color púrpura / violeta, adecuado para exhibiciones de portafolios. Incluye soporte para modo oscuro.
Componente del reproductor de audio Glassmorphism
Un componente de reproductor de audio complejo, de estilo glassmorphism, diseñado para interfaces industriales/de fabricación, con colores de alto contraste, capacidad de respuesta total y compatibilidad con el modo oscuro.
Componente del reproductor de audio
Un componente de reproductor de audio receptivo con un diseño inspirado en el papel / impresión, una combinación de colores neutros geniales, compatibilidad con modo oscuro y funciones interactivas adecuadas para plataformas de entretenimiento y medios.