搜索组件

类别

组件音频播放器

音频播放器

播放音频内容的接口

Audio Player 组件

一个复杂、简约的音频播放器组件，具有复古/复古配色方案，专为约会/社交平台而设计。功能包括播放控件、进度条、音量控制、轨道信息和深色模式支持。

                <div class="flex flex-col items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4 font-sans">

  <!-- Audio Player Container -->
  <div class="w-full max-w-sm md:max-w-md lg:max-w-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 rounded-xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-stone-300 dark:border-stone-700">

    <!-- Header / Track Info -->
    <div class="p-6 flex flex-col items-center text-center">
      <div class="w-32 h-32 md:w-40 md:h-40 rounded-lg shadow-lg mb-4 overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/300/300?random=1" alt="Album Art" class="w-full h-full object-cover">
      </div>
      <p class="text-xs text-stone-600 dark:text-stone-400 uppercase tracking-widest mb-1">Playing from your matches</p>
      <h2 class="text-2xl md:text-3xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate max-w-full">Echoes of Your Smile</h2>
      <p class="text-base text-stone-700 dark:text-stone-300 mb-4 truncate max-w-full">Melody Muses ft. Rhythmic Soul</p>
    </div>

    <!-- Playback Controls and Progress Bar -->
    <div class="px-6 pb-6 pt-2">
      <!-- Progress Bar -->
      <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 mb-5 overflow-hidden group">
        <div class="w-3/4 bg-amber-600 h-2.5 rounded-full transition-all duration-1000 ease-out group-hover:w-[85%]" style="width: 75%;"></div>
      </div>

      <!-- Time Display -->
      <div class="flex justify-between text-xs font-mono text-stone-600 dark:text-stone-400 mb-6">
        <span>2:45</span>
        <span>-1:15</span>
      </div>

      <!-- Main Playback Buttons -->
      <div class="flex items-center justify-around mb-8">
        <button class="p-3 rounded-full text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 11.2a1 1 0 0 0-1.4 0L14 13.9V6a1 1 0 0 0-2 0v7.9l-2.9-2.7a1 1 0 0 0-1.4 1.4l4 3.7c.4.4 1 .4 1.4 0l4-3.7a1 1 0 0 0 0-1.4z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
        </button>
        <button class="p-3 rounded-full text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/></svg>
        </button>
        <button class="p-4 rounded-full bg-amber-600 text-white shadow-lg transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-amber-500 transition-all duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 5v14l12-7z"/>
          </svg>
        </button>
        <button class="p-3 rounded-full text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 5v14l-11-7z"/></svg>
        </button>
        <button class="p-3 rounded-full text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.7 12.8a1 1 0 0 0 1.4 0L10 10.1v7.9a1 1 0 0 0 2 0v-7.9l2.9 2.7a1 1 0 0 0 1.4-1.4l-4-3.7c-.4-.4-1-.4-1.4 0l-4 3.7a1 1 0 0 0 0 1.4z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
        </button>
      </div>

      <!-- Volume Control -->
      <div class="flex items-center gap-4 text-stone-700 dark:text-stone-300 mb-6">
        <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M11 5L6 9H2v6h4l5 4V5zm7.5 7c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM19 12c0 2.98-2.59 5.4-5.5 5.4v-10.8c2.91 0 5.5 2.42 5.5 5.4z"/>
        </svg>
        <input type="range" min="0" max="100" value="75" class="w-full h-1.5 rounded-lg appearance-none cursor-pointer bg-stone-400 dark:bg-stone-600 accent-amber-600 transition-colors duration-200">
        <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM19 12c0 2.98-2.59 5.4-5.5 5.4v-10.8c2.91 0 5.5 2.42 5.5 5.4z"/>
        </svg>
      </div>

      <!-- Social Interaction Buttons -->
      <div class="flex items-center justify-between mt-4">
        <button class="flex items-center gap-2 text-sm text-stone-700 dark:text-stone-300 px-4 py-2 rounded-full border border-stone-300 dark:border-stone-700 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          <span>Like</span>
        </button>
        <button class="flex items-center gap-2 text-sm text-stone-700 dark:text-stone-300 px-4 py-2 rounded-full border border-stone-300 dark:border-stone-700 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7 9h10V7H7v2zm0 4h10v-2H7v2zm0 4h7v-2H7v2z"/></svg>
          <span>Lyrics</span>
        </button>
        <button class="flex items-center gap-2 text-sm text-stone-700 dark:text-stone-300 px-4 py-2 rounded-full border border-stone-300 dark:border-stone-700 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 16.08c-.76 0-1.44.3-1.96.79l-4.57-2.7a3.5 3.5 0 0 0 0-1.59l4.57-2.7a2.99 2.99 0 0 0 1.96.79c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .17.02.34.05.51L10.3 11.2a3.48 3.48 0 0 0-2.3-1.28c-1.66 0-3 1.34-3 3s1.34 3 3 3c.89 0 1.7-.39 2.29-1.02l4.45 2.65c-.03.17-.05.34-.05.51 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/></svg>
          <span>Share</span>
        </button>
      </div>
    </div>

    <!-- Next Song Suggestion (for dating/social context) -->
    <div class="p-6 bg-stone-300 dark:bg-stone-800 border-t border-stone-400 dark:border-stone-700 flex items-center justify-between">
      <div class="flex items-center gap-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full object-cover shadow-md border-2 border-amber-600">
        <div>
          <p class="text-sm text-stone-700 dark:text-stone-300">Next from:</p>
          <p class="font-semibold text-stone-800 dark:text-stone-200">Alex R.</p>
        </div>
      </div>
      <button class="px-4 py-2 text-sm bg-amber-600 text-white rounded-full shadow-md hover:bg-amber-700 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500">
        Message
      </button>
    </div>

  </div>

</div>

Retro_Gaming_Audio_Player

专为游戏网站设计的复古/复古主题音频播放器组件，具有互补的配色方案、响应式布局和深色模式支持。它通过盒式磁带视觉效果模仿 80 年代/90 年代的美学。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-800 via-pink-700 to-orange-600 dark:from-gray-900 dark:via-gray-800 dark:to-black p-4">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-gray-700 to-gray-900 dark:from-gray-800 dark:to-gray-950 rounded-lg p-6 shadow-2xl border-4 border-gray-900 dark:border-gray-700 font-mono transform hover:scale-103 transition-transform duration-300 relative overflow-hidden">
    <!-- Top 'Display' Section -->
    <div class="h-16 w-full bg-gradient-to-r from-green-500 to-green-700 dark:from-green-700 dark:to-green-900 rounded-md mb-4 flex items-center justify-around">
      <div class="text-orange-300 dark:text-orange-500 text-sm sm:text-base font-bold tracking-widest">REC</div>
      <div class="text-orange-300 dark:text-orange-500 text-sm sm:text-base font-bold tracking-widest">PLAY</div>
      <div class="text-orange-300 dark:text-orange-500 text-sm sm:text-base font-bold tracking-widest">FF</div>
      <div class="text-orange-300 dark:text-orange-500 text-sm sm:text-base font-bold tracking-widest">REW</div>
    </div>

    <!-- Cassette Tape Area -->
    <div class="relative bg-gradient-to-br from-red-600 to-purple-800 dark:from-purple-800 dark:to-pink-900 rounded-lg p-4 mb-6 shadow-inner border-2 border-orange-500 dark:border-purple-600 flex justify-center items-center h-48 sm:h-56 md:h-64 lg:h-72 aspect-video">
      <!-- Cassette Spools -->
      <div class="absolute w-20 h-20 sm:w-24 sm:h-24 bg-gray-900 rounded-full border-4 border-red-400 dark:border-purple-300 top-1/2 -mt-10 sm:-mt-12 left-4 flex items-center justify-center animate-spin-slow">
        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-700 rounded-full"></div>
      </div>
      <div class="absolute w-20 h-20 sm:w-24 sm:h-24 bg-gray-900 rounded-full border-4 border-red-400 dark:border-purple-300 top-1/2 -mt-10 sm:-mt-12 right-4 flex items-center justify-center animate-spin-slow">
        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-700 rounded-full"></div>
      </div>
      <!-- Cassette Label/Display -->
      <div class="absolute w-2/3 h-2/3 bg-gray-200 dark:bg-gray-700 border-2 border-gray-500 dark:border-gray-900 rounded-md flex flex-col justify-center items-center p-2 text-center">
        <p class="text-xs sm:text-sm font-bold text-gray-800 dark:text-gray-200 uppercase tracking-wider mb-1">Game Mix '89</p>
        <p class="text-xxs sm:text-xs text-gray-600 dark:text-gray-400 mb-1">Track 03: 'Cyber Runner'</p>
        <div class="w-full h-2 bg-gray-400 dark:bg-gray-600 rounded-full relative overflow-hidden">
          <div class="absolute h-full bg-green-500 dark:bg-green-400" style="width: 65%;"></div>
        </div>
      </div>
    </div>

    <!-- Controls Grid -->
    <div class="grid grid-cols-3 gap-3 md:grid-cols-5 md:gap-4 lg:grid-cols-6 lg:gap-5">
      <button aria-label="Record" class="col-span-1 p-3 sm:p-4 bg-red-600 hover:bg-red-700 dark:bg-red-800 dark:hover:bg-red-900 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-red-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.75 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5zM12.75 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Play" class="col-span-1 p-3 sm:p-4 bg-green-600 hover:bg-green-700 dark:bg-green-800 dark:hover:bg-green-900 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-green-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.528 8.046a.75.75 0 00-.757-.107l-3.5 1.75A.75.75 0 005 10.37V15.5a.75.75 0 001.121.65l3.5-1.75a.75.75 0 00.107-.757L9.528 8.046z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Stop" class="col-span-1 p-3 sm:p-4 bg-gray-500 hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-800 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.75 7A.75.75 0 008 7.75v4.5a.75.75 0 001.5 0v-4.5A.75.75 0 008.75 7z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Previous Track" class="col-span-1 p-3 sm:p-4 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.79 5.23A.75.75 0 0113.75 6v8a.75.75 0 01-1.28.53l-3.5-4a.75.75 0 010-1.06l3.5-4a.75.75 0 01.54-.22zM7.5 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Next Track" class="col-span-1 p-3 sm:p-4 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.21 14.77A.75.75 0 016.25 14V6a.75.75 0 011.28-.53l3.5 4a.75.75 0 010 1.06l-3.5 4a.75.75 0 01-.54.22zM12.5 12.25a.75.75 0 001.5 0v-4.5a.75.75 0 00-1.5 0v4.5z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Eject" class="col-span-1 p-3 sm:p-4 bg-orange-500 hover:bg-orange-600 dark:bg-orange-700 dark:hover:bg-orange-800 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-orange-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.22 8.72a.75.75 0 000 1.06l.75.75a.75.75 0 001.06 0l.75-.75a.75.75 0 000-1.06l-.75-.75a.75.75 0 00-1.06 0l-.75.75zm9.56-.75a.75.75 0 00-1.06 0l-.75.75a.75.75 0 000 1.06l.75.75a.75.75 0 001.06 0l.75-.75a.75.75 0 000-1.06l-.75-.75zM10 18a8 8 0 100-16 8 8 0 000 16zM10 5a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 0010 5z" clip-rule="evenodd"></path></svg>
      </button>
    </div>

    <!-- Volume Slider (placeholder for functionality) -->
    <div class="mt-6">
      <label for="volume" class="block text-gray-200 dark:text-gray-400 text-sm mb-2 uppercase tracking-wide">Volume</label>
      <input type="range" id="volume" name="volume" min="0" max="100" value="70" class="w-full h-3 bg-gray-500 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer range-lg accent-orange-400 dark:accent-purple-400">
    </div>

    <!-- Small decorative lights/indicators -->
    <div class="absolute bottom-4 left-4 flex space-x-2">
      <div class="w-3 h-3 bg-red-400 dark:bg-red-600 rounded-full animate-pulse"></div>
      <div class="w-3 h-3 bg-yellow-400 dark:bg-yellow-600 rounded-full"></div>
    </div>

    <!-- Decorative grills -->
    <div class="absolute bottom-4 right-4 h-6 w-16 bg-gray-600 dark:bg-gray-800 rounded-full flex items-center justify-between px-2">
      <div class="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      <div class="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      <div class="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
    </div>
  </div>
</div>

<style>
  /* Custom spin animation for cassette spools */
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .animate-spin-slow {
    animation: spin-slow 3s linear infinite;
  }

  /* Custom range slider styling for retro feel */
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(to right, var(--tw-gradient-stops));
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    margin-top: -8px; /* Adjust for Firefox */
  }

  input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(to right, var(--tw-gradient-stops));
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: #6b7280; /* Tailwind gray-500 */
    border-radius: 3px;
  }

  .dark input[type="range"]::-webkit-slider-runnable-track {
    background: #4b5563; /* Tailwind gray-700 */
  }

  input[type="range"]::-moz-range-track {
    width: 100%;
    height: 4px;
    background: #6b7280; /* Tailwind gray-500 */
    border-radius: 3px;
  }

  .dark input[type="range"]::-moz-range-track {
    background: #4b5563; /* Tailwind gray-700 */
  }

  /* Tailwind's accent property for range input uses CSS custom properties.
     We define them here to ensure consistent color application for thumbs. */
  :root {
    --tw-accent-orange-400: #fbbf24;
    --tw-accent-purple-400: #a78bfa;
  }

  /* Apply solid color to these elements as they are not gradients */
  .accent-orange-400 {
    color: var(--tw-accent-orange-400);
  }
  .dark .accent-purple-400 {
    color: var(--tw-accent-purple-400);
  }
</style>

Playful Audio Player 组件

一个简单、俏皮的音频播放器组件，具有温暖的棕褐色/棕色色调、圆润的元素和欢快的美感。包括深色模式支持，并完全响应娱乐和媒体平台。

打开预览

                <div class="flex items-center justify-center min-h-screen p-4 bg-amber-50 dark:bg-stone-900">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl bg-amber-100 dark:bg-stone-800 text-stone-800 dark:text-stone-200 border-2 border-amber-200 dark:border-stone-700 transform transition-all duration-300 hover:scale-[1.01]">
    <div class="flex items-center space-x-4 mb-6">
      <div class="relative w-20 h-20 flex-shrink-0">
        <img src="https://picsum.photos/id/1080/200/200" alt="Album Art" class="rounded-full object-cover w-full h-full shadow-md border-2 border-amber-300 dark:border-stone-600">
        <div class="absolute inset-0 rounded-full ring-4 ring-amber-200 dark:ring-stone-700 animate-pulse"></div>
      </div>
      <div class="flex-1 min-w-0">
        <h3 class="text-xl font-bold truncate text-amber-900 dark:text-amber-100 mb-1">Groovy Tunes</h3>
        <p class="text-sm text-stone-600 dark:text-stone-400 truncate">By Awesome Artist</p>
      </div>
    </div>

    <div class="w-full flex items-center mb-6">
      <span class="text-xs text-stone-500 dark:text-stone-400 mr-2">0:45</span>
      <div class="flex-1 h-2 bg-amber-200 dark:bg-stone-700 rounded-full overflow-hidden relative">
        <div class="absolute top-0 left-0 h-full bg-amber-500 dark:bg-amber-600 rounded-full" style="width: 60%;"></div>
        <div class="absolute top-1/2 -mt-2 -mr-2 w-4 h-4 bg-amber-700 dark:bg-amber-400 rounded-full shadow-md" style="left: 60%; transform: translateX(-50%);"></div>
      </div>
      <span class="text-xs text-stone-500 dark:text-stone-400 ml-2">3:20</span>
    </div>

    <div class="flex justify-around items-center mb-4">
      <button class="p-3 rounded-full text-stone-600 dark:text-stone-400 hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="19 20 9 12 19 4 19 20"></polygon>
          <line x1="5" y1="19" x2="5" y2="5"></line>
        </svg>
      </button>
      <button class="p-4 rounded-full bg-amber-500 dark:bg-amber-600 text-white shadow-lg hover:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-200 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="5 3 19 12 5 21 5 3"></polygon>
        </svg>
      </button>
      <button class="p-3 rounded-full text-stone-600 dark:text-stone-400 hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="5 4 15 12 5 20 5 4"></polygon>
          <line x1="19" y1="5" x2="19" y2="19"></line>
        </svg>
      </button>
    </div>

    <div class="flex justify-between text-stone-500 dark:text-stone-400">
      <button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="2"></circle>
          <path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48 0a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="1" y1="3" x2="23" y2="21"></line>
          <path d="M15 5H9l-7 18h22L15 5z"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M7 21l-4-4V3.5a2.5 2.5 0 0 1 5 0V17l-4 4zM16.5 3.5a2.5 2.5 0 0 0-5 0V17l4 4 4-4V3.5z"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M22 17H2a4 4 0 0 1 4-4h12l4 4zM2 7h20a4 4 0 0 0-4-4H6l-4 4z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

Cyberpunk Audio Player 组件

一个简单、响应迅速的音频播放器组件，具有未来主义的赛博朋克美学，采用紫色/紫色配色方案，适用于作品集展示。包括深色模式支持。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-black p-4">
  <div class="w-full max-w-sm rounded-lg overflow-hidden shadow-2xl transform hover:scale-105 transition duration-300 ease-in-out bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-purple-950 dark:to-indigo-950 border border-purple-700 dark:border-indigo-800">
    <div class="relative">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Album Artwork">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
        <button class="p-4 rounded-full bg-purple-500 text-white shadow-lg transform hover:scale-110 active:scale-95 transition duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-400 focus:ring-opacity-75">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 5v14l11-7z"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="p-4 text-white">
      <h3 class="text-xl font-bold text-purple-200 dark:text-purple-300 mb-1">Neon Dreams</h3>
      <p class="text-sm text-purple-300 dark:text-purple-400">Synthwave Artist</p>

      <div class="mt-4">
        <div class="w-full bg-purple-800 rounded-full h-2.5 dark:bg-purple-900">
          <div class="bg-purple-400 h-2.5 rounded-full" style="width: 65%;"></div>
        </div>
        <div class="flex justify-between text-xs mt-2 text-purple-300 dark:text-purple-400">
          <span>0:45</span>
          <span>3:20</span>
        </div>
      </div>

      <div class="flex justify-around items-center mt-6 text-purple-300 dark:text-purple-400">
        <button class="p-2 focus:outline-none hover:text-purple-100 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"></path>
          </svg>
        </button>
        <button class="p-2 focus:outline-none hover:text-purple-100 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18V6h3v12H6zm5 0V6h3v12h-3zm5 0V6h3v12h-3z"></path>
          </svg>
        </button>
        <button class="p-2 focus:outline-none hover:text-purple-100 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2 14.5V9.5l-6 4.5 6 4.5z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

豪华/高级音频播放器

一个简单、优雅的音频播放器组件，专为论坛或社区平台设计，具有豪华/高级风格和秋季配色方案，响应迅速，支持深色模式。

打开预览

                <div class="max-w-md mx-auto p-4 md:p-6 rounded-xl shadow-xl bg-orange-50 dark:bg-zinc-800 transition-colors duration-300 transform hover:scale-[1.01] ease-in-out">
  <div class="flex items-center space-x-4">
    <div class="flex-shrink-0">
      <img class="h-16 w-16 rounded-lg object-cover shadow-md" src="https://picsum.photos/id/1047/100/100" alt="Album Art">
    </div>
    <div class="flex-1 min-w-0">
      <h3 class="text-lg md:text-xl font-serif text-amber-900 dark:text-orange-200 truncate">Autumn Leaves Melody</h3>
      <p class="text-sm md:text-base text-orange-700 dark:text-zinc-400 truncate">by <span class="font-medium">Elegant Soundscapes</span></p>
    </div>
  </div>

  <div class="mt-4">
    <input type="range" class="w-full h-1 bg-amber-200 rounded-lg appearance-none cursor-pointer accent-orange-700 dark:bg-zinc-600 dark:accent-orange-500" value="30" min="0" max="100">
    <div class="flex justify-between text-xs mt-1 text-orange-600 dark:text-zinc-400 font-mono">
      <span>0:30</span>
      <span>3:45</span>
    </div>
  </div>

  <div class="flex justify-center items-center mt-6 space-x-6">
    <button class="p-2 md:p-3 rounded-full text-orange-700 dark:text-orange-300 hover:bg-orange-100 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
      <svg class="w-6 h-6 md:w-7 md:h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832L14.81 10.832a1 1 0 000-1.664L9.555 7.168z" clip-rule="evenodd"></path></svg>
      <span class="sr-only">Previous Track</span>
    </button>

    <button class="flex items-center justify-center p-3 md:p-4 rounded-full bg-orange-700 text-orange-50 shadow-lg hover:bg-orange-800 dark:bg-orange-600 dark:text-zinc-900 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
      <svg class="w-7 h-7 md:w-8 md:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832L14.81 10.832a1 1 0 000-1.664L9.555 7.168z" clip-rule="evenodd"></path></svg>
      <span class="sr-only">Play/Pause</span>
    </button>

    <button class="p-2 md:p-3 rounded-full text-orange-700 dark:text-orange-300 hover:bg-orange-100 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
      <svg class="w-6 h-6 md:w-7 md:h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm5.293-9.293a1 1 0 00-1.414 0L10 11.586l-3.293-3.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg>
      <span class="sr-only">Next Track</span>
    </button>
  }

</div>

Monospace Audio Player 组件

一个复杂的响应式音频播放器组件，采用等宽/开发人员美学设计，适用于活动和会议网站。具有进度条、控件和跟踪信息，并支持深色模式。

打开预览

                <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8 font-mono bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-lg shadow-xl border border-gray-200 dark:border-gray-800">
  <div class="flex items-center justify-between mb-4">
    <h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">// Audio Stream</h2>
    <div class="flex items-center space-x-2 text-gray-600 dark:text-gray-400 text-sm sm:text-base">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13m-6 0V5a1 1 0 011-1h10a1 1 0 011 1v14a1 1 0 01-1 1H9a1 1 0 01-1-1zm6 0a1 1 0 001 1h10a1 1 0 001-1v-4a1 1 0 00-1-1H9a1 1 0 00-1 1V5a1 1 0 011-1h10a1 1 0 011 1v14a1 1 0 01-1 1H9a1 1 0 01-1-1z"></path></svg>
      <span>LIVE</span>
    </div>
  </div>

  <div class="flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-6 mb-6">
    <div class="w-24 h-24 sm:w-32 sm:h-32 flex-shrink-0 bg-gray-300 dark:bg-gray-700 rounded-md overflow-hidden border-2 border-gray-400 dark:border-gray-600">
      <img src="https://picsum.photos/id/1041/300/300" alt="Album Art" class="w-full h-full object-cover grayscale">
    </div>
    <div class="flex-grow text-center sm:text-left">
      <p class="text-xs text-blue-500 dark:text-blue-400 mb-1">// NOW PLAYING</p>
      <h3 class="text-lg sm:text-xl font-semibold mb-1 text-gray-900 dark:text-white">Conference Keynote: Future of Dev</h3>
      <p class="text-sm text-gray-700 dark:text-gray-300">Speaker: Dr. Ada Lovelace</p>
      <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Track ID: AXP-789-B23-DEV</p>
    </div>
  </div>

  <div class="mb-6">
    <div class="relative h-2 bg-gray-300 dark:bg-gray-700 rounded-full overflow-hidden">
      <div class="absolute top-0 left-0 h-full w-2/3 bg-blue-500 dark:bg-blue-400 rounded-full"></div>
      <div class="absolute top-1/2 left-[66%] -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-blue-600 dark:bg-blue-300 rounded-full shadow-md border-2 border-white dark:border-gray-900"></div>
    </div>
    <div class="flex justify-between text-xs mt-2 text-gray-600 dark:text-gray-400">
      <span>02:15</span>
      <span>08:42</span>
    </div>
  </div>

  <div class="flex items-center justify-center space-x-6 sm:space-x-8 text-gray-700 dark:text-gray-300">
    <button aria-label="Previous" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z"></path></svg>
    </button>
    <button aria-label="Play/Pause" class="p-3 bg-blue-500 dark:bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50">
      <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.027c.808-.474 1.847.166 1.847 1.112v3.662c0 .946-1.039 1.586-1.847 1.112L6.151 10.73c-.808-.474-.808-1.706 0-2.18l3.404-1.923z" clip-rule="evenodd"></path></svg>
    </button>
    <button aria-label="Next" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H6m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </button>
  </div>

  <div class="flex items-center justify-between mt-6 pt-4 border-t border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-400 text-sm">
    <div class="flex items-center space-x-2">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l.293-.293A1 1 0 017 8.586V7a1 1 0 011-1h.414l.293-.293A1 1 0 0110 5.414V4a1 1 0 011-1h1a1 1 0 011 1v.414a1 1 0 01.293.293L14.414 6H16a1 1 0 011 1v1.586a1 1 0 01-.293.707l-.293.293H15zm-2 2a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1h-4z"></path></svg>
      <span>Volume: 75%</span>
    </div>
    <p>// Stream Protocol v1.0</p>
  </div>
</div>

Glassmorphism Audio Player 组件

一个简单、响应式 glassmorphism 风格的音频播放器组件，具有紫色/紫色配色方案，专为制造/工业应用而设计。包括深色模式支持。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-purple-300 to-violet-500 dark:from-gray-900 dark:via-purple-950 dark:to-violet-950 p-4 font-sans">
  <div class="relative w-full max-w-sm rounded-2xl p-6 shadow-xl overflow-hidden backdrop-blur-md bg-white/30 dark:bg-gray-800/30 border border-white/10 dark:border-white/5">
    <div class="absolute inset-0 -z-10">
      <div class="absolute top-0 left-0 w-24 h-24 bg-purple-400 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob dark:bg-purple-700"></div>
      <div class="absolute top-0 right-0 w-24 h-24 bg-violet-400 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000 dark:bg-violet-700"></div>
      <div class="absolute -bottom-8 left-20 w-24 h-24 bg-fuchsia-400 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000 dark:bg-fuchsia-700"></div>
    </div>

    <div class="flex items-center justify-start mb-4">
      <button class="p-2 focus:outline-none text-white/80 transition-transform duration-300 transform hover:scale-110">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
        </svg>
      </button>
      <h3 class="text-lg font-semibold text-white ml-2 drop-shadow-md">Now Playing</h3>
    </div>

    <div class="relative w-48 h-48 mx-auto mb-6 rounded-xl overflow-hidden shadow-lg border border-white/20 dark:border-white/5 transform transition-transform duration-300 hover:scale-105">
      <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover" />
      <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent"></div>
    </div>

    <div class="text-center mb-6">
      <p class="text-2xl font-bold text-white mb-1 drop-shadow-md">Manufacturing Line 3</p>
      <p class="text-sm text-white/70 tracking-wide">Acoustic Waves for Productivity</p>
    </div>

    <div class="flex items-center mb-6">
      <span class="text-xs text-white/70 w-8 text-left">0:30</span>
      <div class="flex-1 h-1 bg-white/30 rounded-full mx-2 relative">
        <div class="absolute h-full w-1/3 bg-white rounded-full transition-all duration-300 ease-in-out" style="width: 33.33%;"></div>
        <div class="absolute right-2 top-1/2 -mt-1 w-3 h-3 bg-white rounded-full shadow-lg transform -translate-y-1/2"></div>
      </div>
      <span class="text-xs text-white/70 w-8 text-right">3:45</span>
    </div>

    <div class="flex items-center justify-around">
      <button aria-label="Previous Track" class="text-white/80 p-3 rounded-full hover:bg-white/20 transition-colors duration-200 focus:outline-none transform hover:scale-110">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14V5" />
        </svg>
      </button>
      <button aria-label="Play/Pause" class="text-violet-500 bg-white p-4 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110 focus:outline-none group">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 group-hover:text-violet-600" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
        </svg>
      </button>
      <button aria-label="Next Track" class="text-white/80 p-3 rounded-full hover:bg-white/20 transition-colors duration-200 focus:outline-none transform hover:scale-110">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M6 5v14" />
        </svg>
      </button>
    </div>
  </div>
</div>

<style>
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>

Audio Player 组件

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

打开预览

                <div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-stone-800 dark:to-stone-900 font-sans antialiased min-h-screen flex items-center justify-center">
  <div class="w-full max-w-sm mx-auto rounded-3xl shadow-xl overflow-hidden
              bg-gradient-to-br from-white via-stone-50 to-stone-100 
              dark:from-stone-700 dark:via-stone-750 dark:to-stone-800
              transform transition-all duration-300 hover:scale-[1.01]
              border border-stone-200 dark:border-stone-600">
    <div class="p-6 space-y-4 relative overflow-hidden">
      <div class="absolute inset-0 bg-no-repeat bg-center opacity-30 dark:opacity-10" 
           style="background-image: url('https://picsum.photos/seed/watercolor/600/400?blur=5&grayscale'); background-size: cover; filter: saturate(0.5);">
      </div>
      
      <div class="relative z-10 flex flex-col items-center">
        <div class="w-24 h-24 rounded-full overflow-hidden shadow-md border-4 border-stone-100 dark:border-stone-600">
          <img src="https://picsum.photos/seed/consulting/150/150" alt="Podcast Thumbnail" class="w-full h-full object-cover grayscale opacity-90">
        </div>
        <h3 class="mt-4 text-xl font-semibold text-stone-800 dark:text-stone-100 text-center">
          Understanding Client Needs
        </h3>
        <p class="text-sm text-stone-600 dark:text-stone-300 text-center">
          Episode 01: The Consulting Journey
        </p>
      </div>

      <div class="relative z-10 space-y-4">
        <div class="w-full h-2 bg-stone-200 dark:bg-stone-600 rounded-full overflow-hidden relative">
          <div class="absolute top-0 left-0 h-full bg-orange-300 dark:bg-orange-500 rounded-full" style="width: 40%;"></div>
          <div class="absolute top-1/2 left-[40%] -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rounded-full shadow-lg"></div>
        </div>
        <div class="flex justify-between text-xs text-stone-500 dark:text-stone-400">
          <span>0:45</span>
          <span>2:30</span>
        </div>
      </div>

      <div class="relative z-10 flex justify-center items-center gap-6">
        <button class="p-2 text-stone-600 dark:text-stone-300 rounded-full hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v1a8 8 0 0015.356 2m-.001-2H12m13 0l-5 5-5-5" />
          </svg>
        </button>
        <button class="p-3 bg-orange-400 dark:bg-orange-600 text-white rounded-full shadow-lg 
                       hover:bg-orange-500 dark:hover:bg-orange-500 transition-colors 
                       focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="p-2 text-stone-600 dark:text-stone-300 rounded-full hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v1a8 8 0 0015.356 2m-.001-2H12m13 0l-5 5-5-5" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Audio Player 组件

一个响应式音频播放器组件，具有受纸张/印刷启发的设计、酷炫的中性配色方案、深色模式支持以及适用于娱乐和媒体平台的交互式功能。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">

  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
              border border-gray-200 dark:border-gray-700
              transform transition-all duration-300 ease-in-out
              hover:shadow-2xl hover:-translate-y-1
              print-paper-effect relative">

    <!-- Page Curl / Fold Effect (Visual detail for paper feel) -->
    <div class="absolute top-0 right-0 w-16 h-16 bg-gray-50 dark:bg-gray-700 rounded-bl-lg opacity-75" style="clip-path: polygon(100% 0, 0 0, 100% 100%);"></div>
    <div class="absolute top-0 right-0 w-16 h-16 bg-gray-100 dark:bg-gray-900 rounded-bl-lg" style="clip-path: polygon(100% 0, 70% 0, 100% 30%);"></div>

    <!-- Album Art Section -->
    <div class="relative w-full h-64 overflow-hidden rounded-t-lg border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/600/400?random=1" alt="Album Art" class="w-full h-full object-cover object-center filter grayscale-0 dark:filter-none">
      <div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
      <div class="absolute bottom-4 left-4 text-white p-2 rounded-md">
        <h3 class="text-xl font-bold mb-1 drop-shadow-lg">Ephemeral Echoes</h3>
        <p class="text-sm text-gray-200 drop-shadow-md">Luna & The Celestial Tides</p>
      </div>
    </div>

    <!-- Controls Section -->
    <div class="p-6 space-y-4">

      <!-- Playback Progress Bar -->
      <div class="w-full flex items-center space-x-2 text-gray-600 dark:text-gray-400">
        <span class="text-xs font-medium min-w-[30px]">0:45</span>
        <div class="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden relative cursor-pointer">
          <div class="h-full bg-blue-500 dark:bg-blue-400 rounded-full" style="width: 30%;"></div>
          <!-- Draggable thumb (illustrative) -->
          <div class="absolute h-4 w-4 bg-white dark:bg-gray-300 rounded-full shadow border-2 border-blue-500 dark:border-blue-400 -translate-y-1/2 top-1/2 left-[30%] -ml-2"></div>
        </div>
        <span class="text-xs font-medium min-w-[30px]">3:20</span>
      </div>

      <!-- Main Playback Buttons -->
      <div class="flex items-center justify-center space-x-6 text-gray-700 dark:text-gray-300">
        <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200" aria-label="Previous">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
          </svg>
        </button>
        <button class="p-4 bg-blue-500 dark:bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 transition-all duration-200" aria-label="Play/Pause">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
        <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200" aria-label="Next">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M6 5l7 7-7 7" />
          </svg>
        </button>
      </div>

      <!-- Secondary Controls -->
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 pt-4 border-t border-dashed border-gray-300 dark:border-gray-600">
        <button class="flex items-center space-x-1 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 text-sm" aria-label="Shuffle">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12V8m5.416-3a8.001 8.001 0 0115.356 2m-1.879 11H18V9m3 3L15 9m3 9l3 3"/></svg>
          <span class="hidden sm:inline">Shuffle</span>
        </button>

        <div class="flex items-center space-x-4">
          <!-- Volume Control -->
          <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="Volume">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.536 8.464A5 5 0 0117 12h2a7 7 0 00-1.745-4.37A9.001 9.001 0 0121 12h2a11.001 11.001 0 00-2.825-6.879L18 6l-2.464-2.464zM9 6H4a1 1 0 00-1 1v10a1 1 0 001 1h5l4 4V2l-4 4z" />
            </svg>
          </button>
          <!-- Current Playback Mode (Loop/Repeat) -->
          <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="Repeat">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
            </svg>
          </button>
          <!-- More Options / Playlist -->
          <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="More Options">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
            </svg>
          </button>
        </div>
      </div>
    </div>

  </div>

</div>

<style>
  /* This is for the 'paper-like' effect */
  .print-paper-effect {
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* Simulating a subtle texture and shadow */
  }

  /* Optional: Add a very subtle grain/texture if feasible without extra elements */
  /* For a true paper look, a background image or SVG filter would be ideal, but out of scope for pure HTML/TW */
  /* .print-paper-effect::before {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0; bottom: 0;
     background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuMDcwMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDEyOCwxMjgsMTI4LDAuMDgpIiBzdHJva2Utd2lkdGg9IjEuMjUiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48L3BhdHRlcm4+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuMDcwMikvIj48L3N2Z2c+');
     opacity: 0.2;
     pointer-events: none;
     z-index: 0;
  } */
</style>

Memphis_Audio_Player_Component

一个响应式音频播放器组件，其灵感来自 Memphis Design，具有大胆的几何形状和温暖的中性色，并支持深色模式。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-stone-100 to-amber-50 dark:from-stone-900 dark:to-stone-800 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto rounded-3xl shadow-xl overflow-hidden relative border-4 border-stone-200 dark:border-stone-700 bg-amber-50 dark:bg-stone-900 animate-fade-in">

    <!-- Decorative Memphis Shapes -->
    <div class="absolute -top-8 -left-8 w-24 h-24 bg-rose-300 dark:bg-rose-700 rounded-full opacity-70 rotate-12"></div>
    <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-lime-300 dark:bg-lime-700 rounded-full opacity-70 -rotate-45"></div>
    <div class="absolute top-1/4 left-0 w-16 h-16 bg-sky-300 dark:bg-sky-700 transform -translate-x-1/2 rotate-90"></div>
    <div class="absolute bottom-1/3 right-0 w-20 h-20 bg-fuchsia-300 dark:bg-fuchsia-700 transform translate-x-1/2 -rotate-12"></div>
    <div class="absolute top-qtr right-1/4 w-12 h-12 bg-orange-300 dark:bg-orange-700 rounded-lg opacity-80 rotate-45"></div>

    <div class="relative p-6 sm:p-8 lg:p-10 z-10">

      <!-- Header / Album Art -->
      <div class="flex flex-col items-center mb-6 sm:mb-8">
        <div class="w-40 h-40 sm:w-48 sm:h-48 rounded-2xl overflow-hidden shadow-lg border-4 border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 ease-in-out">
          <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-stone-900 dark:text-stone-100 mt-5 mb-1 text-center font-serif leading-tight">Groovy Synthwave Hits</h3>
        <p class="text-stone-600 dark:text-stone-400 text-lg sm:text-xl font-medium text-center font-sans tracking-wide">The Retro Beats</p>
      </div>

      <!-- Progress Bar -->
      <div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-3 sm:h-4 mb-5 sm:mb-6 relative">
        <div class="bg-rose-500 rounded-full h-full w-2/3 shadow-md"></div>
        <div class="absolute -top-1 right-1/3 w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-rose-500 border-2 border-stone-50 dark:border-stone-900 shadow-lg cursor-grab hover:scale-110 transition-transform duration-200"></div>
      </div>
      <div class="flex justify-between text-sm sm:text-base text-stone-500 dark:text-stone-400 mb-8 sm:mb-10">
        <span>2:45</span>
        <span>-1:15</span>
      </div>

      <!-- Controls -->
      <div class="grid grid-cols-5 items-center gap-4 text-stone-800 dark:text-stone-200">
        <button class="col-span-1 flex items-center justify-center p-2 rounded-xl bg-orange-200 dark:bg-orange-700 bg-opacity-70 dark:bg-opacity-70 hover:bg-orange-300 dark:hover:bg-orange-600 focus:outline-none focus:ring-4 focus:ring-orange-300 focus:ring-opacity-50 transition-colors duration-200 group">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M11 18V6l-8 6 8 6zm3.29-1.39L18 12l-3.71-4.61C14.1 6.57 15.03 6 16 6h1c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1h-1c-.97 0-1.9-.57-2.71-1.39z"/></svg>
          <span class="sr-only">Previous Track</span>
        </button>
        <button class="col-span-1 flex items-center justify-center p-2 rounded-xl bg-sky-200 dark:bg-sky-700 bg-opacity-70 dark:bg-opacity-70 hover:bg-sky-300 dark:hover:bg-sky-600 focus:outline-none focus:ring-4 focus:ring-sky-300 focus:ring-opacity-50 transition-colors duration-200 group">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
          <span class="sr-only">Volume</span>
        </button>

        <button class="col-span-1 flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-rose-500 text-white shadow-lg border-4 border-stone-50 dark:border-stone-900 transform hover:scale-110 focus:outline-none focus:ring-4 focus:ring-rose-300 focus:ring-opacity-70 transition-all duration-300 group -mt-4">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 group-hover:rotate-6 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
          <span class="sr-only">Play/Pause</span>
        </button>

        <button class="col-span-1 flex items-center justify-center p-2 rounded-xl bg-sky-200 dark:bg-sky-700 bg-opacity-70 dark:bg-opacity-70 hover:bg-sky-300 dark:hover:bg-sky-600 focus:outline-none focus:ring-4 focus:ring-sky-300 focus:ring-opacity-50 transition-colors duration-200 group">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/></svg>
          <span class="sr-only">Repeat</span>
        </button>
        <button class="col-span-1 flex items-center justify-center p-2 rounded-xl bg-orange-200 dark:bg-orange-700 bg-opacity-70 dark:bg-opacity-70 hover:bg-orange-300 dark:hover:bg-orange-600 focus:outline-none focus:ring-4 focus:ring-orange-300 focus:ring-opacity-50 transition-colors duration-200 group">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M13 6v14l8-6-8-8zM6.71 16.39L6 18c.97 0 1.9.57 2.71 1.39C9.9 20.43 10.83 21 11.72 21H12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1h-.28c-.89 0-1.82.57-2.71 1.39S6.9 6.57 6 7.61L6.71 6.39l-3.71 4.61L6 12l-3.71-4.61z"/></svg>
          <span class="sr-only">Next Track</span>
        </button>
      </div>

    </div>
  </div>
</div>

<style>
  /* Add custom keyframes for entry animation */
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
  }
</style>