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.