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. Install & Import the Player Component

Install from npm and import it once in your app's entry point:

npm install @audiodn/components

import '@audiodn/components/player'

No build step? Load it straight from a CDN instead:

<script type="module" src="https://unpkg.com/@audiodn/components@latest/dist/player.js"></script>

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. Install & Import the Uploader Component

Install from npm and import it once in your app's entry point:

npm install @audiodn/components

import '@audiodn/components/uploader'

No build step? Load it straight from a CDN instead:

<script type="module" src="https://unpkg.com/@audiodn/components@latest/dist/uploader.js"></script>

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. Behind the scenes, the component creates an upload session, makes a per-track request (POST /v1/upload/:upload_session_id/track) for each file, and uploads the bytes to the returned signed URL. ADN then automatically generates variants (e.g., HQ, LQ, Preview).

5. Optional: Webhooks

Add a webhook under Settings → Webhook to be notified when a track reaches a terminal outcome (ready, incomplete, error, or init_error) and when its full file set is complete. See the Track Processing webhook docs.