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
Componente del reproductor de audio Glassmorphism
Un componente de reproducción de audio simple y sensible de estilo glassmorphism con un esquema de color púrpura/violeta, diseñado para aplicaciones industriales/de fabricación. Incluye soporte para modo oscuro.
Reproductor de audio de neumorfismo
Un componente de reproductor de audio de estilo Neumorphism con controles de reproducción, pausa, salto y volumen, diseñado para sitios web empresariales. Cuenta con una barra de progreso, el título de la canción, el artista y la carátula del álbum. Incluye diseño responsivo y soporte para el modo oscuro usando Tailwind CSS.