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

Audio-Player-Komponente

Eine reaktionsschnelle Audioplayer-Komponente, die im Dunkelmodus mit Tailwind CSS entwickelt wurde. Es unterstützt dunkle Themen und bietet eine übersichtliche Benutzeroberfläche für die Audiowiedergabe.

Vorschau

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>

Verwandte Komponenten

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.

Offen

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.

Offen

Audio-Player-Komponente

Eine brutalistische Audioplayer-Komponente mit triadischer Farbgebung und moderater Komplexität, die sich für ein Armaturenbrett eignet. Es verfügt über ein responsives Design mit Unterstützung für dunkle Themen, das mit Tailwind CSS implementiert wurde.

Offen