Pure Web Component · Zero Dependencies · 60 FPS EQ Visualizer

The modern web audio player that respects your craft.

Self-contained, accessible, and fast. Built-in Web Audio API frequency visualizer, real-time ID3 album artwork & lyrics extraction, and styled with a vibrant 90s aesthetic.

Drop In & Play ↓ Try Live Deck

Engineering

Built for Performance and Simplicity

No bloated npm dependencies. No virtual DOM overhead. A pure custom element built directly on browser standards.

</>

Zero Dependencies

A single standalone script with zero third-party packages. Just pure vanilla JavaScript and standard Custom Elements. Drop it anywhere—static sites, Rails, Hugo, React, Vue, or WordPress.

▮▯▰

60 FPS Audio Visualizer

Web Audio API frequency analyzer that renders real-time audio spectrum bars. Includes an intelligent, graceful procedural animation fallback when audio routing restrictions apply.

◆

In-Browser ID3 Extraction

Directly parses binary ID3v2 APIC album art and USLT unsynchronized lyrics right from the MP3 stream in the browser. No server metadata API needed.

⚙

Native CSS Variable Theming

Every color, font, surface, and border is driven by standard CSS custom properties. Style the player globally or scoped to a single container using --player-* variables.

♫

Playlist Ready

Declare multiple tracks via child <audio> tags or a single JSON playlist attribute. Includes next/prev skipping, track switching, and a dynamic dropdown menu.

♿

Accessible by Default

High-contrast sliders, ARIA live region updates, full keyboard navigation, screen-reader friendly button labels, and high-visibility artwork & lyrics modal overlays.

Integration Guide

Drop-In Simplicity

Add the script tag to your head, declare your audio tracks, and you’re running.

index.html HTML

<!-- 1. Include the player script -->
<script src="https://media.jefflunt.com/code/xnk-player/xnk-player.js" defer></script>

<!-- 2. Declare tracks with child <audio> tags -->
<xnk-player>
  <audio
    src="https://your-domain.com/music/track1.mp3"
    title="Luminous Rift"
    artist="Jeff Lunt">
  </audio>
  <audio
    src="https://your-domain.com/music/track2.mp3"
    title="Flesh Into Motion"
    artist="Jeff Lunt">
  </audio>
</xnk-player>

styles.css CSS

/* Customize the chassis with standard CSS variables */
xnk-player {
  --player-bg: #141720;
  --player-surface: #1b202c;
  --player-border: #252d3d;
  --player-text: #f3f5f9;
  --player-muted: #8b95a8;
  --player-accent: #5eafef;       /* 90s Sky Blue */
  --player-spark: #ff001a;        /* Racing Red */
  --player-font-mono: "JetBrains Mono", monospace;
}

Specifications

CSS Variables & Attributes Reference

Full control over behavior, layout tokens, and custom styling.

CSS Custom Properties

Variable	Description	Default Fallback
`--player-bg`	Background color of the main player chassis	`var(--surface, #141720)`
`--player-surface`	Sub-surface and button container background	`var(--surface-2, #1b202c)`
`--player-border`	Border color for outer chassis and control partitions	`var(--border, #252d3d)`
`--player-text`	Primary track title and control foreground color	`var(--text, #f3f5f9)`
`--player-muted`	Artist name, track duration, and subtle glyphs	`var(--muted, #8b95a8)`
`--player-accent`	Play button, scrubber progress, and primary accents	`var(--c-sky, #5eafef)`
`--player-spark`	Signal peaks, active LEDs, and high-energy highlights	`var(--c-red, #ff001a)`

Custom Element Compatibility

Both custom element tags are registered simultaneously. You can use <xnk-player> for new projects or <site-audio-player> for backward compatibility.