# Hybrid Integration | AudioDN Docs

> Use AudioDN

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

---

# Hybrid Integration

Use ADN's API server-to-server to provision upload and play sessions, then pass session IDs to ADN web components.

#### Best For

SaaS products, paywalled content, and multi-tenant apps. Setup takes about 30 minutes.

## Playing Tracks

Server-provisioned sessions with ADN's Player component.

Your server uses ADN's API (server-to-server) to provision play sessions — applying entitlement checks, subscription validation, etc. — then passes the session ID to ADN's Player component on the frontend. Your backend controls who can play; the component handles the UI.

### 1\. Create an API Key

Go to **Settings → API Keys** and create an **API Access** key.

### 2\. Create a Play Session (Server-Side)

```
const response = await fetch('https://api.audiodelivery.net/v1/play_session/collection', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    collection_id,
    variants: ['preview'],
    is_downloadable: false,
    expires_in: 3600 // session duration in seconds (default: 3600, min: 60, max: 86400)
  })
});

const { play_session_id, play_session, tracks } = await response.json();
```

Apply your business logic here — verify the user is logged in, check their subscription, validate purchases, etc.

### 3\. 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>
```

### 4\. Pass Play Session to Client

```
<audiodn-player
  play-session-id="PLAY-SESSION-ID"
></audiodn-player>
```

### 5\. User Playback

Users stream tracks within the session scope. Access is controlled by your backend while playback uses ADN's optimized Player component.

## Uploading Tracks

Server-provisioned sessions with ADN's Uploader component.

Your server uses ADN's API (server-to-server) to provision upload sessions, then passes the session ID to ADN's Uploader component on the frontend. Your backend controls who can upload; the component handles the UI.

### 1\. Create an API Key

Go to **Settings → API Keys** and create an **API Access** key.

### 2\. Create an Upload Session (Server-Side)

```
const response = await fetch('https://api.audiodelivery.net/v1/upload_session', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    collection_id: 'COLLECTION-ID',
    expires_in: 3600 // session duration in seconds (default: 3600, min: 60, max: 86400)
  })
});

const { upload_session } = await response.json();
const { id, collection_id, expires_at } = upload_session;
```

### 3\. 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>
```

### 4\. Pass Upload Session to Client

```
<audiodn-uploader
  upload-session-id="UPLOAD-SESSION-ID"
  accent-color="#ff00ff"
></audiodn-uploader>
```

### 5\. User Upload Flow

Users upload files directly via the component. For each file, the `<audiodn-uploader>` component makes the per-track request (`POST /v1/upload/:upload_session_id/track`) and the direct upload for you — your server only needs to provision the upload session. ADN then automatically processes variants.

### 6\. Optional: Webhooks

Enable a webhook under **Settings → Webhook** to receive an event 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.