Web Integration

Use ADN web components with Client-Side API Keys. No backend required — the fastest way to get started.

Best For

Prototypes, static sites, personal projects, and MVPs. Setup takes about 5 minutes.

Playing Tracks

Embed ADN's Player web component directly in your HTML.

The Player component handles session creation and streaming behind the scenes — no backend required.

1. Create a Client-Side Player API Key

Log in to the AudioDN dashboard and go to Settings → API Keys. Click Create Key and choose Client-Side Player as the key type.

Client-Side keys are safe to embed in your front-end code — they can only be used for playback, not for managing tracks or collections. You can optionally scope the key to specific variants, a collection, playlist, or individual track to further restrict access.

2. Include ADN Web Components

<script type="module" src="https://components.audiodelivery.net/player.js"></script>

NPM Module Coming Soon

We're working on an NPM package for easier integration. Stay tuned for updates!

3. Render the Player Component

<audiodn-player
  api-key="CLIENT-SIDE-PLAYER-API-KEY"
  scope="collection"
  id="COLLECTION-ID"
  variant="hq"
  variants="hq,lq"
  size="large"
  session-ttl="3600"
></audiodn-player>

4. User Playback

The player securely handles playback of tracks within the scoped access.

Uploading Tracks

Embed ADN's Uploader web component directly in your HTML.

The Uploader component handles all API calls behind the scenes — no backend required.

1. Create a Client-Side Upload API Key

Log in to the AudioDN dashboard and go to Settings → API Keys. Click Create Key and choose Client-Side Upload as the key type.

Client-Side Upload keys are safe to embed in your front-end code — they can only create upload sessions, not read or delete tracks. You can optionally scope the key to a specific collection so uploads are automatically directed to the right place.

2. Include ADN Web Components

<script type="module" src="https://components.audiodelivery.net/uploader.js"></script>

NPM Module Coming Soon

We're working on an NPM package for easier integration. Stay tuned for updates!

3. Render the Uploader Component

<audiodn-uploader
  api-key="CLIENT-SIDE-UPLOAD-API-KEY"
  collection-id="COLLECTION-ID"
  accent-color="#ff00ff"
></audiodn-uploader>

If the key is scoped to a collection, omit the collection-id.

4. User Upload Flow

Users upload audio directly. ADN automatically generates variants (e.g., HQ, LQ, Preview).

5. Optional: Webhooks

Add a webhook under Settings → Webhooks to be notified when processing finishes.