# Besuchern einen Clip zur Vorschau anbieten | AudioDN-Beispiele

> Lade eine Audiodatei hoch, erzeuge eine kurze Preview-Variante und bette einen Player ein, der die Waveform der gesamten Spur zeigt, während nur der Clip abspielbar ist.

Source: https://audiodeliverynetwork.com/de/examples/preview-clip-player/

---

# Besuchern einen Clip zur Vorschau anbieten

Biete von jeder Spur eine kurze öffentliche Probe an. Lade eine Audiodatei hoch, erzeuge eine Preview-Variante und bette den AudioDN-Player ein, sodass Besucher die **Waveform der gesamten Spur** sehen, während die Wiedergabe auf das Clip-Fenster beschränkt ist.

Wenn die aktive Variante `isPreview: true` hat, mappt der Player seinen abspielbaren Bereich auf `preview.offsetStart`–`preview.offsetEnd` bezogen auf die Gesamtdauer der Spur. Seeking außerhalb dieses Fensters ist blockiert; die Waveform zeichnet weiterhin die gesamte Spur.

## 1\. Eine Audiodatei hochladen

Erstelle eine Upload-Session gegen eine Collection, lege dann eine Spur in dieser Session an und sende die Datei-Bytes per PUT an die zurückgegebene Upload-URL. AudioDN akzeptiert gängige Audioformate; eine verlustfreie Quelle (WAV, FLAC oder AIFF) ist am besten, damit Preview-Clip und Streaming-Transcodes aus dem Original höchster Qualität abgeleitet werden. Die Beispiele unten nutzen konkret eine WAV-Datei.

Upload-Session erstellen

#### Beispielanfrage

  

```
# COLLECTION_ID: uuid of the collection to upload into
curl -X POST "https://api.audiodelivery.net/v1/upload_session" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
  "collection_id": "COLLECTION_ID",
  "expires_in": 7200
}'
```

```
// COLLECTION_ID: uuid of the collection to upload into

const payload = {
  "collection_id": "COLLECTION_ID",
  "expires_in": 7200
};

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(payload)
});

const data = await response.json();
```

```
# COLLECTION_ID: uuid of the collection to upload into

import requests

headers = {
    "Authorization": "Bearer YOUR_API_KEY",
    "Content-Type": "application/json",
}

payload = {
    "collection_id": "COLLECTION_ID",
    "expires_in": 7200
}

response = requests.post(
    "https://api.audiodelivery.net/v1/upload_session",
    headers=headers,
    json=payload,
)
data = response.json()
```

Spur in der Session erstellen

Kein Bearer-Header — die `upload_session_id` im Pfad autorisiert den Aufruf.

#### Beispielanfrage

  

```
# SESSION_ID: upload_session_id returned by the previous call
curl -X POST "https://api.audiodelivery.net/v1/upload/SESSION_ID/track" \
  -H "Content-Type: application/json" \
  -d '{
  "file_name": "track.wav"
}'
```

```
// SESSION_ID: upload_session_id returned by the previous call

const payload = {
  "file_name": "track.wav"
};

const response = await fetch('https://api.audiodelivery.net/v1/upload/SESSION_ID/track', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(payload)
});

const data = await response.json();
```

```
# SESSION_ID: upload_session_id returned by the previous call

import requests

headers = {
    "Content-Type": "application/json",
}

payload = {
    "file_name": "track.wav"
}

response = requests.post(
    "https://api.audiodelivery.net/v1/upload/SESSION_ID/track",
    headers=headers,
    json=payload,
)
data = response.json()
```

Datei-Bytes hochladen

PUT track\_upload.upload\_url

```
# Nachdem create-track track_upload.upload_url zurückgibt, PUT der Datei-Bytes:
# Dieses Beispiel nutzt ein WAV — jedes unterstützte Audio funktioniert; verlustfrei (WAV/FLAC/AIFF) ist am besten.
curl -X PUT "$UPLOAD_URL" \
  --data-binary @track.wav \
  -H "Content-Type: audio/wav"
```

Polle `GET /v1/track/:track_id`, bis `track_status_id` `ready` ist (organisationsweite Varianten, einschließlich Waveforms, werden in diesem Schritt fertig). Siehe die [Upload Sessions API](/docs/api/upload-sessions) für den vollständigen Lifecycle.

## 2\. Eine Preview-Variante hinzufügen

Konfiguriere eine Preview-Variante einmal im Dashboard, damit sie für jeden Upload gilt, oder hänge eine an eine fertige Spur mit der Variants API an. Die Clip-Länge wird in Sekunden oder Prozent gemessen; der Startpunkt ist immer ein Prozentanteil der Gesamtdauer.

#### Beispielanfrage

  

```
# TRACK_ID: uuid of the ready track
curl -X POST "https://api.audiodelivery.net/v1/track/TRACK_ID/variant" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
  "variant_type_id": "preview",
  "index": "preview",
  "codec": "aac",
  "bitrate": 96,
  "is_stereo": true,
  "is_strip_tags": true,
  "is_strip_cover": true,
  "preview_type": "seconds",
  "preview_seconds": 90,
  "preview_percent": 25,
  "preview_min_percent": 0,
  "preview_max_percent": 60,
  "preview_min_seconds": 0,
  "preview_max_seconds": 90,
  "preview_start_percent": 25
}'
```

```
// TRACK_ID: uuid of the ready track

const payload = {
  "variant_type_id": "preview",
  "index": "preview",
  "codec": "aac",
  "bitrate": 96,
  "is_stereo": true,
  "is_strip_tags": true,
  "is_strip_cover": true,
  "preview_type": "seconds",
  "preview_seconds": 90,
  "preview_percent": 25,
  "preview_min_percent": 0,
  "preview_max_percent": 60,
  "preview_min_seconds": 0,
  "preview_max_seconds": 90,
  "preview_start_percent": 25
};

const response = await fetch('https://api.audiodelivery.net/v1/track/TRACK_ID/variant', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(payload)
});

const data = await response.json();
```

```
# TRACK_ID: uuid of the ready track

import requests

headers = {
    "Authorization": "Bearer YOUR_API_KEY",
    "Content-Type": "application/json",
}

payload = {
    "variant_type_id": "preview",
    "index": "preview",
    "codec": "aac",
    "bitrate": 96,
    "is_stereo": True,
    "is_strip_tags": True,
    "is_strip_cover": True,
    "preview_type": "seconds",
    "preview_seconds": 90,
    "preview_percent": 25,
    "preview_min_percent": 0,
    "preview_max_percent": 60,
    "preview_min_seconds": 0,
    "preview_max_seconds": 90,
    "preview_start_percent": 25
}

response = requests.post(
    "https://api.audiodelivery.net/v1/track/TRACK_ID/variant",
    headers=headers,
    json=payload,
)
data = response.json()
```

Das Beispiel oben fordert einen AAC-96-kbps-Stereo-Clip an: bis zu 90 Sekunden (zusätzlich auf 60 % der Dauer begrenzt), Start bei 25 % der Spur, Tags und Cover-Art entfernt. Bei dieser Demo-Spur (~2:38) wird das Ziel von 90 Sekunden `preview_seconds` nicht erreicht — `preview_max_percent` (60 %) greift zuerst und verkürzt den Clip. Die Spur geht kurz in `processing` und kehrt zu `ready` zurück, wenn der Clip fertig ist. Vollständige Parameterreferenz: [Variants API](/docs/api/variants).

## 3\. Den Player mit der Preview-Variante einbetten

Richte `<audiodn-player>` auf die Spur und fordere nur die `preview`\-Variante an. Nutze einen Client-Side-Player-API-Schlüssel (sicher im Browser). Der Player lädt Waveform-Levels der gesamten Spur und beschränkt die Wiedergabe auf den Clip.

#### Abhängigkeit

 

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

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

#### Verwendung

```
<script type="module">
import '@audiodn/components/player';
</script>

<audiodn-player
api-key="YOUR_PLAYER_API_KEY"
scope="track"
id="TRACK_ID"
variants="preview"
size="regular"
></audiodn-player>
```

### Live-Demo

Spiele das Sample unten ab — die Waveform spannt die gesamte Spur, aber nur das Preview-Fenster ist seekbar und abspielbar.

Musik von [Nyktrn](https://soundcloud.com/nyktrn)

Brauchst du Cover-Art, Playlists, Themes oder Größen? Siehe die [Player component docs](/docs/components/player).

## Checkliste

-   Audiodatei (hier WAV; verlustfrei ist am besten) wird hochgeladen und erreicht `ready`.
-   Eine `preview`\-Variante existiert auf der Spur (Dashboard-Rezept oder `POST /v1/track/:id/variant`).
-   Der Player ist auf die Spur gescoped mit `variants=“preview”` und einem Client-Side-Player-Schlüssel.
-   Die Waveform zeigt die gesamte Spur; Seeking außerhalb des Clip-Fensters ist blockiert.

Veröffentlicht 12\. Juli 2026