Mini Floating Audio Player

Colours in this gradient

• #0f172a
• #f43f5e
• #fb7185
• #ffffff

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="audio-stage">
  <div class="audio-card">
    <div class="vinyl-disc" id="vinylDisc">
      <div class="vinyl-center">🎵</div>
    </div>
    
    <div class="audio-main">
      <div class="audio-title">Midnight Cyber Synth</div>
      <div class="audio-artist">Solaris Wave · 128 BPM</div>
      
      <div class="audio-progress">
        <div class="ap-bar">
          <div class="ap-fill" id="audioFill"></div>
        </div>
        <div class="ap-time"><span>01:42</span><span>03:50</span></div>
      </div>
    </div>

    <div class="audio-controls">
      <button class="play-btn" id="audioPlayBtn" aria-label="Play/Pause">▶</button>
    </div>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create a compact floating mini audio player card in HTML, CSS and vanilla JavaScript.

Requirements:
- Vinyl record artwork that spins continuously when playing (animation-play-state: running).
- Play/Pause toggle button that alters icon and pauses rotation.
- Track metadata (title, artist, BPM) and scrubbable progress bar with timestamps.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1. 1

   Style rotating circular vinyl disc using CSS keyframes and radial gradient.

2. 2

   Use animation-play-state: running/paused to synchronize playback state with rotation.

3. 3

   Toggle play/pause glyphs on click.

Customisation tips

• Keep widget compact (around 440px max-width) so it can dock on bottom corners of pages.

More components