# Integración web | Docs de AudioDN

> Integra AudioDN en tu sitio web usando componentes web con claves API Client-Side. No se requiere backend.

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

---

# Integración web

Usa los componentes web de ADN con claves API Client-Side. No se requiere backend — la forma más rápida de empezar.

#### Ideal para

Prototipos, sitios estáticos, proyectos personales y MVPs. La configuración tarda unos 5 minutos.

## Reproducir pistas

Incrusta el componente web Player de ADN directamente en tu HTML.

El componente Player gestiona la creación de sesiones y el streaming entre bastidores — no se requiere backend.

### 1\. Crear una clave API Client-Side Player

Inicia sesión en el [panel de AudioDN](https://account.audiodeliverynetwork.com) y ve a **Settings → API Keys**. Haz clic en **Create Key** y elige **Client-Side Player** como tipo de clave.

Las claves Client-Side son seguras para incrustar en tu código front-end — solo se pueden usar para reproducción, no para gestionar pistas o colecciones. Opcionalmente puedes limitar la clave a variantes concretas, una colección, playlist o pista individual para restringir aún más el acceso.

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

### 3\. Renderizar el componente 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\. Reproducción del usuario

El player gestiona de forma segura la reproducción de pistas dentro del acceso con alcance.

## Subir pistas

Incrusta el componente web Uploader de ADN directamente en tu HTML.

El componente Uploader gestiona todas las llamadas a la API entre bastidores — no se requiere backend.

### 1\. Crear una clave API Client-Side Upload

Inicia sesión en el [panel de AudioDN](https://account.audiodeliverynetwork.com) y ve a **Settings → API Keys**. Haz clic en **Create Key** y elige **Client-Side Upload** como tipo de clave.

Las claves Client-Side Upload son seguras para incrustar en tu código front-end — solo pueden crear sesiones de subida, no leer ni eliminar pistas. Opcionalmente puedes limitar la clave a una colección concreta para que las subidas se dirijan automáticamente al lugar correcto.

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

### 3\. Renderizar el componente Uploader

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

Si la clave tiene alcance a una colección, omite el `collection-id`.

### 4\. Flujo de subida del usuario

Los usuarios suben audio directamente. Entre bastidores, el componente crea una sesión de subida, hace una solicitud por pista (`POST /v1/upload/:upload_session_id/track`) por cada archivo y sube los bytes a la URL firmada devuelta. ADN genera entonces automáticamente las variantes (p. ej., HQ, LQ, Preview).

### 5\. Opcional: Webhooks

Añade un webhook en **Settings → Webhook** para recibir notificaciones 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).