Composant de lecteur audio
Un composant de lecteur audio réactif conçu en mode sombre à l’aide de Tailwind CSS. Il prend en charge le thème sombre et fournit une interface propre pour la lecture audio.
HTML Code
<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>Composants associés
Retro_Gaming_Audio_Player
Un composant de lecteur audio à thème rétro/vintage conçu pour les sites Web de jeux, avec une palette de couleurs complémentaire, une mise en page réactive et une prise en charge du mode sombre. Il imite l’esthétique des années 80/90 avec un visuel de cassette.
Composant de lecteur audio
Un composant de lecteur audio réactif avec des micro-interactions, une palette de couleurs de terre, une complexité modérée et une prise en charge du thème sombre, adapté aux sites Web d’entreprise.
Lecteur audio Glassmorphism
Lecteur audio Glassmorphism avec des couleurs vives pour le tableau de bord, réactif avec prise en charge du mode sombre. Pas de JavaScript.