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
Reproductor de audio de tonos tierra de Memphis
Un componente de reproductor de audio moderadamente complejo diseñado en un estilo inspirado en Memphis con una combinación de colores en tonos tierra, adecuado para sitios de documentación o wiki. Presenta formas geométricas audaces, patrones divertidos y capacidad de respuesta total con soporte para modo oscuro.
Reproductor de audio monocromático 3D
Componente de reproductor de audio monocromático 3D sensible para cartera, compatible con modo oscuro
Componente del reproductor de audio
Componente de reproductor de audio de morfismo de vidrio complejo para redes sociales con combinación de colores triádica, diseño receptivo y compatibilidad con temas oscuros.