Componente lettore audio
Un semplice componente del lettore audio progettato con uno stile scheumorfico, utilizzando una combinazione di colori in scala di grigi e supportando la modalità scura.
Codice 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>Componenti correlati
Componente lettore audio
Componente complesso del lettore audio Glassmorphism per i social media con combinazione di colori triadica, design reattivo e supporto per temi scuri.
Componente lettore audio
Un componente del lettore audio reattivo con un design ispirato alla carta/stampa, una combinazione di colori neutri e freddi, supporto per la modalità oscura e funzionalità interattive adatte per piattaforme di intrattenimento e multimediali.
Lettore audio retrò
Componente Implementazione di un lettore audio con design retrò/vintage, effetti reattivi e supporto per temi scuri.