# Web Integration | AudioDN Docs

> Integrate AudioDN into your website using web components with Client-Side API Keys. No backend required.

Source: https://audiodeliverynetwork.com/docs/integration/web/

---

# 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](https://account.audiodeliverynetwork.com) 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](https://account.audiodeliverynetwork.com) 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/webhooks/track-processing) docs.