Componente del reproductor de audio
Un componente de reproductor de audio sensible diseñado en modo oscuro con Tailwind CSS. Es compatible con el tema oscuro y proporciona una interfaz limpia para la reproducción de audio.
Código HTML
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-md max-w-lg mx-auto">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/80/80" alt="Album Art" class="rounded-full border-2 border-gray-600">
<div class="ml-4">
<h2 class="text-lg font-semibold">Song Title</h2>
<p class="text-gray-400">Artist Name</p>
</div>
</div>
<audio controls class="w-full mb-4">
<source src="path_to_your_audio_file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="flex items-center justify-between">
<button class="text-gray-300 hover:text-white">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 3l7 7-7 7-7-7 7-7z" />
</svg>
</button>
<div class="flex items-center">
<button class="text-gray-300 hover:text-white mx-2">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 3l7 7-7 7-7-7 7-7z" />
</svg>
</button>
<input type="range" class="w-32 mx-2 accent-gray-600" value="50" />
<button class="text-gray-300 hover:text-white mx-2">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 3l7 7-7 7-7-7 7-7z" />
</svg>
</button>
</div>
<button class="text-gray-300 hover:text-white">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 3l7 7-7 7-7-7 7-7z" />
</svg>
</button>
</div>
</div>Componentes relacionados
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 monocromático 3D
Componente de reproductor de audio monocromático 3D sensible para cartera, compatible con modo oscuro
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.