コンポーネント オーディオプレーヤー オーディオプレーヤーコンポーネント

オーディオプレーヤーコンポーネント

スキューモーフィック スタイルでデザインされたシンプルなオーディオ プレーヤー コンポーネントで、グレースケールの配色を使用し、ダーク モードをサポートします。

プレビュー

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>

関連コンポーネント

オーディオプレーヤーコンポーネント

紙や印刷物にインスパイアされたデザイン、クールなニュートラルな配色、ダークモードのサポート、エンターテインメントやメディアプラットフォームに適したインタラクティブ機能を備えたレスポンシブオーディオプレーヤーコンポーネント。

開ける

レトロオーディオプレーヤー

レトロ/ビンテージデザインのオーディオプレーヤーコンポーネント、パステルカラースキーム、複雑な複雑さ、ソーシャルメディアの目的、レスポンシブ、ダークテーマのサポート、Tailwind CSSのみのHTMLを使用

開ける

ブルータリストオーディオプレーヤー

レスポンシブデザイン、ダークモードのサポート、JavaScriptなしのブルータリズムオーディオプレーヤーコンポーネント。

開ける