# Intégration web | Docs AudioDN

> Intégrez AudioDN dans votre site web à l

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

---

# Intégration web

Utilisez les composants web ADN avec des clés API côté client. Aucun backend requis — le moyen le plus rapide de démarrer.

#### Idéal pour

Prototypes, sites statiques, projets personnels et MVP. La configuration prend environ 5 minutes.

## Lecture des pistes

Intégrez le composant web Player d’ADN directement dans votre HTML.

Le composant Player gère la création de session et le streaming en coulisses — aucun backend requis.

### 1\. Créer une clé API Client-Side Player

Connectez-vous au [tableau de bord AudioDN](https://account.audiodeliverynetwork.com) et allez dans **Settings → API Keys**. Cliquez sur **Create Key** et choisissez **Client-Side Player** comme type de clé.

Les clés côté client peuvent être intégrées en toute sécurité dans votre code front-end — elles ne peuvent être utilisées que pour la lecture, pas pour gérer les pistes ou les collections. Vous pouvez optionnellement limiter la clé à des variantes spécifiques, une collection, une playlist ou une piste individuelle pour restreindre davantage l’accès.

### 2\. 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>
```

### 3\. Afficher le composant Player

```
<audiodn-player
  api-key="CLIENT-SIDE-PLAYER-API-KEY"
  scope="collection"
  id="COLLECTION-ID"
  variant="hq"
  variants="hq,lq"
  size="large"
  session-ttl="3600"
></audiodn-player>
```

### 4\. Lecture utilisateur

Le lecteur gère de façon sécurisée la lecture des pistes dans l’accès limité.

## Envoi des pistes

Intégrez le composant web Uploader d’ADN directement dans votre HTML.

Le composant Uploader gère tous les appels API en coulisses — aucun backend requis.

### 1\. Créer une clé API Client-Side Upload

Connectez-vous au [tableau de bord AudioDN](https://account.audiodeliverynetwork.com) et allez dans **Settings → API Keys**. Cliquez sur **Create Key** et choisissez **Client-Side Upload** comme type de clé.

Les clés Client-Side Upload peuvent être intégrées en toute sécurité dans votre code front-end — elles ne peuvent que créer des sessions d’envoi, pas lire ni supprimer des pistes. Vous pouvez optionnellement limiter la clé à une collection spécifique pour que les envois soient automatiquement dirigés au bon endroit.

### 2\. 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>
```

### 3\. Afficher le composant Uploader

```
<audiodn-uploader
  api-key="CLIENT-SIDE-UPLOAD-API-KEY"
  collection-id="COLLECTION-ID"
  accent-color="#ff00ff"
></audiodn-uploader>
```

Si la clé est limitée à une collection, omettez le `collection-id`.

### 4\. Flux d'envoi utilisateur

Les utilisateurs envoient l’audio directement. En coulisses, le composant crée une session d’envoi, fait une requête par piste (`POST /v1/upload/:upload_session_id/track`) pour chaque fichier, et envoie les octets vers l’URL signée renvoyée. ADN génère ensuite automatiquement les variantes (par ex. HQ, LQ, Preview).

### 5\. Optionnel : Webhooks

Ajoutez un webhook sous **Settings → Webhook** pour être notifié 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).