Audio-Player-Komponente
Eine einfache Audioplayer-Komponente, die in einem skeuomorphen Stil entwickelt wurde, ein Graustufen-Farbschema verwendet und den Dunkelmodus unterstützt.
HTML-Code
<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>Verwandte Komponenten
Audio-Player-Komponente
Eine komplexe, minimalistische Audioplayer-Komponente mit einem Retro-/Vintage-Farbschema, das für Dating-/Social-Media-Plattformen entwickelt wurde. Zu den Funktionen gehören Wiedergabesteuerung, Fortschrittsbalken, Lautstärkeregelung, Titelinformationen und Unterstützung des Dunkelmodus.
Audio-Player-Komponente
Eine reaktionsschnelle Audioplayer-Komponente mit Mikrointeraktionen, Erdton-Farbschema, moderater Komplexität und Unterstützung für dunkle Themen, geeignet für Geschäfts-/Unternehmenswebsites.
Audio-Player-Komponente
Eine komplexe Audioplayer-Komponente, die für ein Dashboard entwickelt wurde, mit responsivem Design, Unterstützung für dunkle Themen und ansprechenden Mikrointeraktionen.