Player — ADN Components

Sizes

The size attribute controls cover art, typography, and play button scaling.

Small

<audiodn-player
  api-key="YOUR_API_KEY"
  scope="track"
  id="TRACK_ID"
  variants="hq,lq"
  size="small"
></audiodn-player>

Regular

<audiodn-player
  api-key="YOUR_API_KEY"
  scope="track"
  id="TRACK_ID"
  variants="hq,lq"
  size="regular"
></audiodn-player>

Large

<audiodn-player
  api-key="YOUR_API_KEY"
  scope="track"
  id="TRACK_ID"
  variants="hq,lq"
  size="large"
></audiodn-player>

Playlist

A collection with multiple tracks and a tracklist. Uses scope="collection".

<audiodn-player
  api-key="YOUR_API_KEY"
  scope="collection"
  id="COLLECTION_ID"
  variants="hq,lq"
  size="regular"
></audiodn-player>

Themes

Override CSS custom properties on the host to restyle the player without touching internals.

Light / Dark (system preference)

.theme-lightdark {
  --adn-main-border: 1px solid light-dark(#ccc, #444);
  --adn-bg: light-dark(#fff, #111);
  --adn-bg-light: light-dark(#ddd, #333);
  --adn-color-font: light-dark(#222, #eee);
  --adn-color-font-muted: light-dark(#666, #aaa);
  --adn-color-accent: light-dark(#333, #eee);
  --adn-color-accent-alt: light-dark(#fff, #111);
  --adn-waveform-color-playhead: light-dark(#333, #eee);
  --adn-coverart-filter: grayscale(100%);
}

<audiodn-player
  class="theme-lightdark"
  api-key="YOUR_API_KEY"
  scope="collection"
  id="COLLECTION_ID"
  variants="hq,lq"
  size="regular"
></audiodn-player>

Midnight

.theme-midnight {
  --adn-bg: #1a1a2e;
  --adn-bg-light: #2a2a4e;
  --adn-color-font: #e0e0e0;
  --adn-color-font-muted: #8888aa;
  --adn-color-accent: #e94560;
  --adn-color-accent-rgb: 233, 69, 96;
  --adn-color-accent-alt: #fff;
  --adn-radius: 12px;
  --adn-padding: 0.5rem;
  --adn-coverart-transform: none;
  --adn-coverart-radius: 8px;
  --adn-playbutton-radius: 8px;
}

<audiodn-player
  class="theme-midnight"
  api-key="YOUR_API_KEY"
  scope="collection"
  id="COLLECTION_ID"
  variants="hq,lq"
  size="regular"
></audiodn-player>

Electric (single track)

.theme-electric {
  --adn-bg: #0a0a0f;
  --adn-bg-light: #16161f;
  --adn-color-font: #e4e4f0;
  --adn-color-font-muted: #7878a0;
  --adn-color-accent: #00d4ff;
  --adn-color-accent-rgb: 0, 212, 255;
  --adn-color-accent-alt: #0a0a0f;
  --adn-radius: 4px;
  --adn-main-border: 1px solid #00d4ff33;
  --adn-box-shadow: 0 0 20px #00d4ff15;
  --adn-waveform-color-playhead: #00d4ff;
  --adn-coverart-transform: none;
  --adn-coverart-radius: 2px;
  --adn-playbutton-radius: 4px;
}

<audiodn-player
  class="theme-electric"
  api-key="YOUR_API_KEY"
  scope="track"
  id="TRACK_ID"
  variants="hq,lq"
  size="regular"
></audiodn-player>