# Hybrid-Integration | AudioDN Docs

> Nutzen Sie die API von AudioDN Server-zu-Server, um Sessions zu provisionieren, und übergeben Sie die Session-IDs anschließend an AudioDN-Webkomponenten im Frontend.

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

---

# 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](/docs/webhooks/track-processing).