오디오 플레이어 구성 요소

스큐어모픽 스타일로 디자인된 간단한 오디오 플레이어 컴포넌트로, 그레이스케일 색 구성표를 사용하고 다크 모드를 지원합니다.

미리 보기

HTML 코드

<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>

오디오 플레이어 구성 요소

미리 보기

HTML 코드

관련 구성 요소

오디오 플레이어 구성 요소

브루탈리스트 오디오 플레이어

Luxury_Medical_Audio_Player