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>