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

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

Audio-Player-Komponente

Eine brutalistische Audioplayer-Komponente mit pastellfarbenem Farbschema, komplexem Layout und responsivem Design mit Unterstützung für dunkle Themen, geeignet für Unternehmenswebsites. Es verwendet Tailwind CSS für das Styling und enthält Steuerelemente für Wiedergabe/Pause, Lautstärke und einen Fortschrittsbalken.

Offen

Neumorphism Audioplayer

Eine Audioplayer-Komponente im Neumorphism-Stil mit Wiedergabe-, Pause-, Überspringen- und Lautstärkereglern, die für Unternehmenswebsites entwickelt wurde. Enthält einen Fortschrittsbalken, einen Songtitel, einen Künstler und ein Albumcover. Enthält Responsive Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen