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

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

Bauhaus Audio Player Komponente

Eine komplexe, reaktionsschnelle Audioplayer-Komponente, die nach Bauhaus-Prinzipien für Sport-/Fitnessanwendungen entwickelt wurde, mit einer schwarz-weißen Basis und einer auffälligen Akzentfarbe. Enthält Unterstützung für Wiedergabesteuerungen, Fortschrittsbalken, Lautstärkeregler, Titelliste und Dunkelmodus.

Offen

3D_Forest_Audio_Player

Eine reaktionsschnelle Audioplayer-Komponente mit 3D-Designelementen unter Verwendung einer Wald-/Grün-Farbpalette, die für Bildungsplattformen mit Unterstützung des Dunkelmodus geeignet ist.

Offen