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