# Integración híbrida | Docs de AudioDN

> Usa la API de AudioDN de servidor a servidor para aprovisionar sesiones y luego pasa los IDs de sesión a los componentes web de AudioDN en el frontend.

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

---

# Integración híbrida

Usa la API de ADN de servidor a servidor para aprovisionar sesiones de subida y reproducción, y luego pasa los IDs de sesión a los componentes web de ADN.

#### Ideal para

Productos SaaS, contenido con paywall y apps multi-tenant. La configuración tarda unos 30 minutos.

## Reproducir pistas

Sesiones aprovisionadas en el servidor con el componente Player de ADN.

Tu servidor usa la API de ADN (servidor a servidor) para aprovisionar sesiones de reproducción — aplicando comprobaciones de derechos, validación de suscripción, etc. — y luego pasa el ID de sesión al componente Player de ADN en el frontend. Tu backend controla quién puede reproducir; el componente gestiona la UI.

### 1\. Crear una clave API

Ve a **Settings → API Keys** y crea una clave **API Access**.

### 2\. Crear una sesión de reproducción (lado servidor)

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

Aplica aquí tu lógica de negocio — verifica que el usuario ha iniciado sesión, comprueba su suscripción, valida compras, etc.

### 3\. Instalar e importar el componente Player

Instálalo desde npm e impórtalo una vez en el punto de entrada de tu app:

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

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

¿Sin paso de build? Cárgalo directamente desde un CDN:

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

### 4\. Pasar la sesión de reproducción al cliente

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

### 5\. Reproducción del usuario

Los usuarios reproducen pistas dentro del alcance de la sesión. El acceso lo controla tu backend mientras la reproducción usa el componente Player optimizado de ADN.

## Subir pistas

Sesiones aprovisionadas en el servidor con el componente Uploader de ADN.

Tu servidor usa la API de ADN (servidor a servidor) para aprovisionar sesiones de subida, y luego pasa el ID de sesión al componente Uploader de ADN en el frontend. Tu backend controla quién puede subir; el componente gestiona la UI.

### 1\. Crear una clave API

Ve a **Settings → API Keys** y crea una clave **API Access**.

### 2\. Crear una sesión de subida (lado servidor)

```
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\. Instalar e importar el componente Uploader

Instálalo desde npm e impórtalo una vez en el punto de entrada de tu app:

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

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

¿Sin paso de build? Cárgalo directamente desde un CDN:

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

### 4\. Pasar la sesión de subida al cliente

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

### 5\. Flujo de subida del usuario

Los usuarios suben archivos directamente a través del componente. Por cada archivo, el componente `<audiodn-uploader>` hace la solicitud por pista (`POST /v1/upload/:upload_session_id/track`) y la subida directa por ti — tu servidor solo necesita aprovisionar la sesión de subida. ADN procesa entonces las variantes automáticamente.

### 6\. Opcional: Webhooks

Habilita un webhook en **Settings → Webhook** para recibir un evento cuando una pista alcanza un resultado terminal (`ready`, `incomplete`, `error` o `init_error`) y cuando su conjunto completo de archivos está listo. Consulta la documentación del [webhook Track Processing](/docs/webhooks/track-processing).