Audio Player Component
A responsive audio player component designed in dark mode using Tailwind CSS. It supports dark theme and provides a clean interface for audio playback.
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>Related Components
Luxury_Medical_Audio_Player
A complex, responsive, luxury-themed audio player component for healthcare applications, featuring sophisticated typography, refined color palettes (triadic), and dark mode support.
Bauhaus Audio Player Component
A complex, responsive audio player component designed with Bauhaus principles for sports/fitness applications, featuring a black and white base with a striking accent color. Includes playback controls, progress bar, volume control, track list, and dark mode support.
Audio Player Component
A brutalist audio player component with triadic color scheme and moderate complexity, suitable for a dashboard. It features a responsive design with dark theme support, implemented with Tailwind CSS.