# Intégration hybride | Docs AudioDN

> Utilisez l

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

---

# Intégration hybride

Utilisez l’API ADN de serveur à serveur pour provisionner les sessions d’envoi et de lecture, puis passez les identifiants de session aux composants web ADN.

#### Idéal pour

Produits SaaS, contenu derrière un paywall et applications multi-locataires. La configuration prend environ 30 minutes.

## Lecture des pistes

Sessions provisionnées côté serveur avec le composant Player d’ADN.

Votre serveur utilise l’API ADN (de serveur à serveur) pour provisionner les sessions de lecture — en appliquant des vérifications d’entitlements, la validation d’abonnement, etc. — puis passe l’identifiant de session au composant Player d’ADN côté frontend. Votre backend contrôle qui peut lire ; le composant gère l’interface.

### 1\. Créer une clé API

Allez dans **Settings → API Keys** et créez une clé **API Access**.

### 2\. Créer une session de lecture (côté serveur)

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

Appliquez votre logique métier ici — vérifiez que l’utilisateur est connecté, contrôlez son abonnement, validez les achats, etc.

### 3\. Installer et importer le composant Player

Installez depuis npm et importez-le une fois dans le point d’entrée de votre application :

```
npm install @audiodn/components
```

```
import '@audiodn/components/player'
```

Pas d’étape de build ? Chargez-le directement depuis un CDN à la place :

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

### 4\. Passer la session de lecture au client

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

### 5\. Lecture utilisateur

Les utilisateurs streamment les pistes dans la portée de la session. L’accès est contrôlé par votre backend tandis que la lecture utilise le composant Player optimisé d’ADN.

## Envoi des pistes

Sessions provisionnées côté serveur avec le composant Uploader d’ADN.

Votre serveur utilise l’API ADN (de serveur à serveur) pour provisionner les sessions d’envoi, puis passe l’identifiant de session au composant Uploader d’ADN côté frontend. Votre backend contrôle qui peut envoyer ; le composant gère l’interface.

### 1\. Créer une clé API

Allez dans **Settings → API Keys** et créez une clé **API Access**.

### 2\. Créer une session d'envoi (côté serveur)

```
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\. Installer et importer le composant Uploader

Installez depuis npm et importez-le une fois dans le point d’entrée de votre application :

```
npm install @audiodn/components
```

```
import '@audiodn/components/uploader'
```

Pas d’étape de build ? Chargez-le directement depuis un CDN à la place :

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

### 4\. Passer la session d'envoi au client

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

### 5\. Flux d'envoi utilisateur

Les utilisateurs envoient les fichiers directement via le composant. Pour chaque fichier, le composant `<audiodn-uploader>` fait la requête par piste (`POST /v1/upload/:upload_session_id/track`) et l’envoi direct pour vous — votre serveur n’a besoin que de provisionner la session d’envoi. ADN traite ensuite automatiquement les variantes.

### 6\. Optionnel : Webhooks

Activez un webhook sous **Settings → Webhook** pour recevoir un événement lorsqu’une piste atteint un résultat terminal (`ready`, `incomplete`, `error` ou `init_error`) et lorsque son jeu de fichiers complet est prêt. Voir la documentation du [webhook Track Processing](/docs/webhooks/track-processing).