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
Un componente de reproductor de audio receptivo con microinteracciones, combinación de colores en tonos tierra, complejidad moderada y compatibilidad con temas oscuros, adecuado para sitios web comerciales / corporativos.
Reproductor de audio neumórfico
Un simple componente de reproductor de audio neumórfico con un esquema de color de tonos tierra para un tablero, construido con Tailwind CSS. Es compatible con el diseño responsivo y el tema oscuro.
Reproductor de audio skeuomórfico
Un componente de reproductor de audio diseñado con un estilo skeuomórfico, una combinación de colores pastel y una interfaz compleja. Es compatible con el modo oscuro y es responsivo, adecuado para sitios de comercio electrónico.