Hybrid-Integration

Nutzen Sie die API von ADN Server-zu-Server, um Upload- und Wiedergabesessions zu provisionieren, und übergeben Sie die Session-IDs anschließend an ADN-Webkomponenten.

Ideal für

SaaS-Produkte, Inhalte hinter einer Paywall und Multi-Tenant-Apps. Die Einrichtung dauert etwa 30 Minuten.

Tracks abspielen

Serverseitig provisionierte Sessions mit der Player-Komponente von ADN.

Ihr Server nutzt die API von ADN (Server-zu-Server), um Wiedergabesessions zu provisionieren — dabei werden Berechtigungsprüfungen, Abonnementvalidierung usw. angewendet — und übergibt anschließend die Session-ID an die Player-Komponente von ADN im Frontend. Ihr Backend steuert, wer abspielen darf; die Komponente übernimmt die Oberfläche.

1. Einen API-Key erstellen

Gehen Sie zu Settings → API Keys und erstellen Sie einen API Access-Key.

2. Eine Wiedergabesession erstellen (serverseitig)

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

Wenden Sie hier Ihre Geschäftslogik an — prüfen Sie, ob der Nutzer angemeldet ist, kontrollieren Sie sein Abonnement, validieren Sie Käufe usw.

3. Die Player-Komponente installieren & importieren

Installieren Sie sie über npm und importieren Sie sie einmal im Einstiegspunkt Ihrer App:

npm install @audiodn/components

import '@audiodn/components/player'

Kein Build-Schritt? Laden Sie sie stattdessen direkt von einem CDN:

<script type="module" src="https://unpkg.com/@audiodn/components@latest/dist/player.js"></script>

4. Wiedergabesession an den Client übergeben

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

5. Wiedergabe durch den Nutzer

Nutzer streamen Tracks innerhalb des Session-Umfangs. Der Zugriff wird von Ihrem Backend gesteuert, während die Wiedergabe die optimierte Player-Komponente von ADN nutzt.

Tracks hochladen

Serverseitig provisionierte Sessions mit der Uploader-Komponente von ADN.

Ihr Server nutzt die API von ADN (Server-zu-Server), um Upload-Sessions zu provisionieren, und übergibt anschließend die Session-ID an die Uploader-Komponente von ADN im Frontend. Ihr Backend steuert, wer hochladen darf; die Komponente übernimmt die Oberfläche.

1. Einen API-Key erstellen

Gehen Sie zu Settings → API Keys und erstellen Sie einen API Access-Key.

2. Eine Upload-Session erstellen (serverseitig)

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. Die Uploader-Komponente installieren & importieren

Installieren Sie sie über npm und importieren Sie sie einmal im Einstiegspunkt Ihrer App:

npm install @audiodn/components

import '@audiodn/components/uploader'

Kein Build-Schritt? Laden Sie sie stattdessen direkt von einem CDN:

<script type="module" src="https://unpkg.com/@audiodn/components@latest/dist/uploader.js"></script>

4. Upload-Session an den Client übergeben

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

5. Upload-Ablauf für Nutzer

Nutzer laden Dateien direkt über die Komponente hoch. Für jede Datei stellt die Komponente <audiodn-uploader> die track-spezifische Anfrage (POST /v1/upload/:upload_session_id/track) und übernimmt den direkten Upload für Sie — Ihr Server muss nur die Upload-Session provisionieren. ADN verarbeitet anschließend automatisch die Varianten.

6. Optional: Webhooks

Aktivieren Sie unter Settings → Webhook einen Webhook, um ein Ereignis zu erhalten, wenn ein Track ein terminales Ergebnis erreicht (ready, incomplete, error oder init_error) und wenn sein vollständiger Dateisatz fertig ist. Siehe die Docs zum Track-Processing-Webhook.