组件 音频播放器 音频播放器组件

音频播放器组件

一个简单的音频播放器组件,采用拟物化风格,使用灰度色调并支持暗黑模式。

预览

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>

相关组件

Luxury_Medical_Audio_Player

一个复杂、响应迅速、以奢华为主题的音频播放器组件,适用于医疗保健应用,具有复杂的排版、精致的调色板(三色)和深色模式支持。

打开

Audio Player 组件

一个简单的响应式音频播放器组件,具有水彩/艺术设计风格、温暖的中性配色方案和完整的深色模式支持,适用于咨询或基于服务的网站。

打开

复古音频播放器

具有 Retro/Vintage 设计的音频播放器组件、柔和的配色方案、复杂的复杂性、社交媒体用途、响应式、深色主题支持、仅 HTML 和 Tailwind CSS

打开