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