# Web-Integration | AudioDN Docs

> Integrieren Sie AudioDN mithilfe von Webkomponenten mit Client-Side-API-Keys in Ihre Website. Kein Backend erforderlich.

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

---

# Web-Integration

Nutzen Sie ADN-Webkomponenten mit Client-Side-API-Keys. Kein Backend erforderlich — der schnellste Weg, um zu starten.

#### Ideal für

Prototypen, statische Sites, persönliche Projekte und MVPs. Die Einrichtung dauert etwa 5 Minuten.

## Tracks abspielen

Betten Sie die Player-Webkomponente von ADN direkt in Ihr HTML ein.

Die Player-Komponente übernimmt die Session-Erstellung und das Streaming im Hintergrund — kein Backend erforderlich.

### 1\. Einen Client-Side-Player-API-Key erstellen

Melden Sie sich im [AudioDN-Dashboard](https://account.audiodeliverynetwork.com) an und gehen Sie zu **Settings → API Keys**. Klicken Sie auf **Create Key** und wählen Sie **Client-Side Player** als Key-Typ.

Client-Side-Keys können sicher in Ihren Frontend-Code eingebettet werden — sie lassen sich ausschließlich zur Wiedergabe verwenden, nicht zur Verwaltung von Tracks oder Sammlungen. Optional können Sie den Key auf bestimmte Varianten, eine Sammlung, eine Playlist oder einen einzelnen Track beschränken, um den Zugriff weiter einzuschränken.

### 2\. Die Player-Komponente installieren & importieren

Installieren Sie sie über npm und importieren Sie sie einmal im Einstiegspunkt Ihrer App:

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

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

Kein Build-Schritt? Laden Sie sie stattdessen direkt von einem CDN:

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

### 3\. Die Player-Komponente rendern

```
<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\. Wiedergabe durch den Nutzer

Der Player übernimmt die sichere Wiedergabe von Tracks innerhalb des zugewiesenen Zugriffsbereichs.

## Tracks hochladen

Betten Sie die Uploader-Webkomponente von ADN direkt in Ihr HTML ein.

Die Uploader-Komponente übernimmt alle API-Aufrufe im Hintergrund — kein Backend erforderlich.

### 1\. Einen Client-Side-Upload-API-Key erstellen

Melden Sie sich im [AudioDN-Dashboard](https://account.audiodeliverynetwork.com) an und gehen Sie zu **Settings → API Keys**. Klicken Sie auf **Create Key** und wählen Sie **Client-Side Upload** als Key-Typ.

Client-Side-Upload-Keys können sicher in Ihren Frontend-Code eingebettet werden — sie können ausschließlich Upload-Sessions erstellen, nicht Tracks lesen oder löschen. Optional können Sie den Key auf eine bestimmte Sammlung beschränken, damit Uploads automatisch an den richtigen Ort geleitet werden.

### 2\. Die Uploader-Komponente installieren & importieren

Installieren Sie sie über npm und importieren Sie sie einmal im Einstiegspunkt Ihrer App:

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

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

Kein Build-Schritt? Laden Sie sie stattdessen direkt von einem CDN:

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

### 3\. Die Uploader-Komponente rendern

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

Wenn der Key auf eine Sammlung beschränkt ist, lassen Sie `collection-id` weg.

### 4\. Upload-Ablauf für Nutzer

Nutzer laden Audiodateien direkt hoch. Im Hintergrund erstellt die Komponente eine Upload-Session, stellt für jede Datei eine track-spezifische Anfrage (`POST /v1/upload/:upload_session_id/track`) und lädt die Bytes an die zurückgegebene signierte URL hoch. ADN erzeugt anschließend automatisch Varianten (z. B. HQ, LQ, Preview).

### 5\. Optional: Webhooks

Fügen Sie unter **Settings → Webhook** einen Webhook hinzu, um benachrichtigt zu werden, wenn ein Track ein terminales Ergebnis erreicht (`ready`, `incomplete`, `error` oder `init_error`) und wenn sein vollständiger Dateisatz fertig ist. Siehe die Docs zum [Track-Processing-Webhook](/docs/webhooks/track-processing).