CCHub Logo CCHub Tailwind Collection
Komponenten Audioplayer (Audioplayer) Audio-Player-Komponente

Audio-Player-Komponente

Eine einfache Audioplayer-Komponente, die in einem skeuomorphen Stil entwickelt wurde, ein Graustufen-Farbschema verwendet und den Dunkelmodus unterstützt.

Vorschau

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 reaktionsschnelle Audioplayer-Komponente, die im Glassmorphism-Stil entwickelt wurde, sich durch ein mattglasähnliches Aussehen und Unterstützung für den Dunkelmodus auszeichnet.

Offen

Glassmorphism Audioplayer

Glassmorphism-Audioplayer mit lebendigen Farben für das Dashboard, reaktionsschnell mit Unterstützung für den Dunkelmodus. Kein JavaScript.

Offen

Glassmorphism Audio Player-Komponente

Eine komplexe, glasmorphism-artige Audioplayer-Komponente, die für Fertigungs-/Industrieschnittstellen entwickelt wurde und sich durch kontrastreiche Farben, volle Reaktionsfähigkeit und Unterstützung des Dunkelmodus auszeichnet.

Offen