Get Started with ADN
Choose your integration approach based on your technical requirements and timeline. Each path offers different levels of control, security, and complexity.
Choose Your Integration Path
Compare the three approaches to find the best fit for your project.
Client-Side
Drop-in components with API keys. No backend required.
- Best for:
- Prototypes, static sites, personal projects
- Complexity:
- Low
- Security:
- Basic
- Setup time:
- 5 minutes
Server-Side
Full API access. Build custom upload and playback interfaces.
- Best for:
- Mobile apps, custom platforms, enterprise
- Complexity:
- High
- Security:
- Maximum
- Setup time:
- 1-2 hours
Hybrid
Backend creates sessions, frontend uses ADN components.
- Best for:
- SaaS products, paywalled content, multi-tenant apps
- Complexity:
- Medium
- Security:
- High
- Setup time:
- 30 minutes
Step 1: Configure Variants
When you upload audio to ADN, it's often in different formats, bitrates, or qualities that aren't ideal for consistent playback. Variants let you standardize each track into the formats and qualities your product needs — like high-quality streaming, low-bandwidth fallback, or clipped previews.
Beyond playback, variants can also generate waveform images, track analysis data, and more. You decide which variants to create up front, and ADN automatically generates them for every upload.
Original Upload
Any format, quality, or bitrate
High Quality
256kbps MP3
Low Quality
96kbps MP3
Preview Clip
30s sample
Waveform
Visual data
Client-Side Integration
The fastest way to get started with ADN
What it's for
ADN's simplest integration path — drop in the Uploader and Player components with Component API Keys, and ADN handles the API calls behind the scenes.
Best for creators or teams who want the fastest setup without a backend.
Uploading Audio to ADN
Create an Uploader Component API Key
Login to ADN, go to Settings → API Keys, and create an Uploader Component key.
Include ADN Web Components
<script src="https://components.audiodeliverynetwork.com/audiodn-uploader.js"></script>Render the Uploader Component
<audiodn-uploader
api-key="UPLOAD-COMPONENT-API-KEY"
collection-id="COLLECTION-ID"
accent-color="#ff00ff"
></audiodn-uploader>Playing Audio
Create a Player Component API Key
Under Settings → API Keys, create a Player Component key.
Render the Player Component
<audiodn-player
api-key="PLAYER-COMPONENT-API-KEY"
scope="collection"
id="COLLECTION-ID"
variant="hq"
variants="hq,lq"
size="large"
></audiodn-player>Why choose Client-Side?
- Fastest setup — embed components with API keys and go live in minutes
- No backend required — ideal for static sites and personal projects
- Great for prototypes — validate ideas quickly
Server-Side Integration
Maximum control with full API access
What it's for
The most powerful and flexible path. You use ADN's API directly and build your own upload and playback interfaces.
Best for developers building custom apps, mobile experiences, or platforms that need fine-grained control.
Uploading Audio
Create an Upload Session
const response = await fetch('https://api.audiodeliverynetwork.com/v1/upload_session', {
method: 'POST',
headers: {
'Authorization': 'Bearer YOUR_API_KEY',
'Content-Type': 'application/json'
},
body: JSON.stringify({ collection_id: 'COLLECTION-ID' })
});
const { upload_session } = await response.json();Upload Files
await fetch(upload_url, {
method,
headers: { 'Content-Type': file.type },
body: file
});Playing Audio
Create a Play Session
const response = await fetch('https://api.audiodeliverynetwork.com/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
})
});
const { play_session_id, tracks } = await response.json();Why choose Server-Side?
- Maximum flexibility — design fully custom workflows
- Mobile-first ready — required for native mobile apps
- Enterprise-grade security — control who can upload and play
Hybrid Integration
Best of both worlds — API control with UI components
What it's for
A middle-ground approach: your backend creates upload and play sessions using ADN's API, then passes those session IDs to the client-side components.
Best for teams that want backend-driven security with fast, component-based development.
Uploading Audio
Create an Upload Session (Server-Side)
/v1/upload_sessionCreate Upload Session
Create a new upload session for a collection
const response = await fetch('https://api.audiodeliverynetwork.com/v1/upload_session', {
method: 'POST',
headers: {
'Authorization': 'Bearer YOUR_API_KEY',
'Content-Type': 'application/json'
},
body: JSON.stringify({ collection_id: 'COLLECTION-ID' })
});
const { upload_session } = await response.json();{
"ok": true,
"upload_session_id": "us_1234567890abcdef"
}Pass Upload Session to Client
<audiodn-uploader
upload-session-id="UPLOAD-SESSION-ID"
accent-color="#ff00ff"
></audiodn-uploader>Playing Audio
Create a Play Session (Server-Side)
/v1/play_session/collectionCreate Play Session
Create a play session for a collection
const response = await fetch('https://api.audiodeliverynetwork.com/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
})
});
const { play_session_id } = await response.json();{
"ok": true,
"play_session_id": "ps_1234567890abcdef"
}Pass Play Session to Client
<audiodn-player
play-session-id="PLAY-SESSION-ID"
></audiodn-player>Why choose Hybrid?
- Balanced approach — your backend creates sessions, the frontend uses ADN's UI
- Security-first — sessions live on your backend
- Business logic ready — apply entitlements and paywalls
Ready to start building?
Sign up for your free ADN account and start integrating audio infrastructure today.