Playing Tracks

Choose the playback approach that fits your project.

Mix and Match

You can combine different approaches for uploads and playback. For example, use a Client-Side Player Component key scoped to only "preview" variants for public listening, while using Hybrid playback to securely grant access to full HQ tracks after purchase or subscription validation. Choose what works best for each part of your application.

Choose Your Approach

Client-Side

Fastest setup. Drop in the Player component with a Component API Key. No backend required.

Server-Side

Maximum control. Build custom players with full business logic, paywalls, and mobile app integration.

Hybrid

Best of both. Backend creates sessions with entitlement checks, frontend uses ADN's Player component.

Client-Side Playback

Best for: Static sites, public content, or teams without a backend.

The fastest path to audio playback. Drop in the Player component with a Component API Key, and ADN handles secure streaming behind the scenes.

1. Create a Player Component API Key

Under Settings → API Keys, create a Player Component key. Scope it to specific variants and a collection, playlist, or track.

2. Include ADN Web Components

<script src="https://components.audiodeliverynetwork.com/audiodn-player.js"></script>

NPM Module Coming Soon

We're working on an NPM package for easier integration. Stay tuned for updates!

3. 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>

4. User Playback

The player securely handles playback of tracks within the scoped access.

Server-Side Playback

Best for: Mobile apps, subscription platforms, or any experience requiring custom players and access control.

The most powerful and flexible path. Use ADN's API to create play sessions and build completely custom playback experiences with full control over access, entitlements, and business logic.

1. Create an API Key

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

2. 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();

This is where you apply business logic — check subscriptions, verify purchases, or enforce access rules before creating the session.

3. Fetch Track Data

const { id: track_id } = tracks[0];

// No auth needed - the session ID acts as a bearer token
const response = await fetch(`https://api.audiodeliverynetwork.com/v1/play/${play_session_id}/${track_id}`);

const { variants } = await response.json();
const preview = variants.find(v => v.variant.variant_type.id === 'preview');
console.log(`Play Audio File: ${preview.url}`);

4. Custom Playback

Use the returned URL in your own audio player implementation. Works with any player library or native mobile audio APIs.

Hybrid Playback

Best for: SaaS platforms, subscription services, or teams wanting backend security with ready-made UI.

A balanced approach: your backend creates play sessions using ADN's API (applying entitlement checks, subscription validation, etc.), then passes the session ID to the client-side Player component.

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.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, play_session, tracks } = await response.json();

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

3. Pass Play Session to Client

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

4. User Playback

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