# Player-Komponente | AudioDN Docs

> Audio-Player-Komponente mit Cover-Artwork, Wellenform-Visualisierung und Tracklist-Unterstützung. Entdecken Sie Größen, Playlists und Theme-Anpassung.

Source: https://audiodeliverynetwork.com/de/docs/components/player/

---

# Player

Audio-Player-Komponente mit Cover-Artwork, Wellenform und Tracklist-Unterstützung.

## Verwendung

Installieren Sie das Paket über npm und importieren Sie die Komponente, dann setzen Sie das Element in Ihre Seite ein. Geben Sie einen Client-Side-API-Key an und verweisen Sie auf einen Track oder eine Sammlung.

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

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

```
<audiodn-player
api-key="YOUR_API_KEY"
scope="collection"
id="COLLECTION_ID"
variants="hq,lq"
size="regular"
></audiodn-player>
```

Bevorzugen Sie keinen Build-Schritt? Laden Sie die Komponente stattdessen direkt von einem CDN:

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

### Attribute

| Attribut | Typ | Standard | Beschreibung |
| --- | --- | --- | --- |
| `api-key` | string | — | Client-Side-API-Key (sicher für die Verwendung im Frontend-Code). Entweder `api-key` oder `play-session-id` ist erforderlich. Wenn gesetzt, wird die Session automatisch erneuert, bevor sie abläuft. |
| `play-session-id` | string | — | Serverseitig provisionierte Wiedergabesession-ID. Entweder `play-session-id` oder `api-key` ist erforderlich. Nutzen Sie dies, wenn Ihr Server Sessions im Auftrag des Clients erstellt. |
| `scope` | string | — | `“track”` für einen einzelnen Track oder `“collection”` für eine Playlist |
| `id` | string | — | Track- oder Sammlungs-ID, die abgespielt werden soll |
| `variants` | string | `""` | Kommagetrennte Liste von Audio-Qualitätsvarianten (z. B. `“hq,lq”`) |
| `size` | string | `”large”` | Player-Größe: `“small”`, `“regular”` oder `“large”` |
| `theme` | string | `”auto”` | Farbthema: `“dark”` (weißer Text auf dunklem Hintergrund), `“light”` (dunkler Text auf sanftem hellgrauem Hintergrund) oder `“auto”`. `“auto”` folgt der `prefers-color-scheme`\-Einstellung des Betriebssystems/Browsers des Besuchers und wechselt live, wenn sie sich ändert. Die Akzentfarbe nutzt automatisch die kontrastsichere Variante (`player_color_dark` oder `player_color_light`) für das aktive Theme. Einzelne CSS-Custom-Properties (siehe Themes) überschreiben weiterhin die Palette. |
| `volume` | number | `0.7` | Anfängliche Lautstärke (0–1) |
| `autoplay` | boolean | `false` | Wenn gesetzt, startet die Wiedergabe automatisch, sobald der erste Track geladen ist. Beachten Sie, dass Autoplay-Richtlinien des Browsers unter Umständen weiterhin eine Nutzerinteraktion erfordern, bevor Audio mit Ton abgespielt werden kann. |
| `downloadable` | boolean | `false` | Wenn gesetzt, wird im Einstellungsmenü für jede Variante eine Download-Option angezeigt. Dies ist nur eine Anfrage: Die `is_downloadable`\-Einstellung des API-Keys ist maßgeblich. Wenn der Key keine Downloads erlaubt, wird die Option trotzdem angezeigt, der Download aber verweigert, und es wird eine lokalisierte Meldung „Dieser Track ist nicht herunterladbar” angezeigt. Legen Sie die Download-Berechtigung des Keys im Dashboard fest, wenn Sie einen Player-API-Key erstellen. |
| `session-ttl` | number | `3600` | Time-to-Live der Session in Sekunden (Standard 3600 = 1 Stunde, min. 60, max. 86400). Wenn `api-key` gesetzt ist, wird die Session automatisch erneuert, bevor sie abläuft. |
| `waveform-*` | — | — | Jedes Attribut der [Wellenform-Komponente](/docs/components/waveform#waveform-usage) kann mit dem Präfix `waveform-` übergeben werden (z. B. `waveform-variant`, `waveform-height`, `waveform-line-width`) und wird an die interne Wellenform weitergeleitet. |

## Größen

Das Attribut `size` steuert die Skalierung von Cover-Artwork, Typografie und Play-Button.

### Klein

```
<audiodn-player
api-key="YOUR_API_KEY"
scope="track"
id="TRACK_ID"
variants="hq,lq"
size="small"
></audiodn-player>
```

### Standard

```
<audiodn-player
api-key="YOUR_API_KEY"
scope="track"
id="TRACK_ID"
variants="hq,lq"
size="regular"
></audiodn-player>
```

### Groß

```
<audiodn-player
api-key="YOUR_API_KEY"
scope="track"
id="TRACK_ID"
variants="hq,lq"
size="large"
></audiodn-player>
```

## Playlist

Eine Sammlung mit mehreren Tracks und einer Tracklist. Nutzt `scope=“collection”`.

```
<audiodn-player
api-key="YOUR_API_KEY"
scope="collection"
id="COLLECTION_ID"
variants="hq,lq"
size="regular"
></audiodn-player>
```

## Themes

Der schnellste Weg, zwischen Hell und Dunkel zu wechseln, ist das oben beschriebene Attribut `theme` (`“auto”`, `“dark”` oder `“light”`) — `“auto”` folgt der Systemeinstellung des Besuchers und wählt automatisch die kontrastsichere Akzentvariante für Sie aus. Für eine feinere Steuerung können Sie weiterhin einzelne CSS-Custom-Properties auf dem Host überschreiben, um den Player neu zu stylen, ohne die interne Implementierung anzufassen.

### Hell / Dunkel (Systemeinstellung)

```
.theme-lightdark {
--adn-main-border: 1px solid light-dark(#ccc, #444);
--adn-bg: light-dark(#fff, #111);
--adn-bg-light: light-dark(#ddd, #333);
--adn-color-font: light-dark(#222, #eee);
--adn-color-font-muted: light-dark(#666, #aaa);
--adn-color-accent: light-dark(#333, #eee);
--adn-color-accent-alt: light-dark(#fff, #111);
--adn-waveform-color-playhead: light-dark(#333, #eee);
--adn-waveform-playhead-width: 2px;
--adn-coverart-filter: grayscale(100%);
}
```

```
<audiodn-player
class="theme-lightdark"
api-key="YOUR_API_KEY"
scope="collection"
id="COLLECTION_ID"
variants="hq,lq"
size="regular"
></audiodn-player>
```

### Midnight

```
.theme-midnight {
--adn-bg: #1a1a2e;
--adn-bg-light: #2a2a4e;
--adn-color-font: #e0e0e0;
--adn-color-font-muted: #8888aa;
--adn-color-accent: #e94560;
--adn-color-accent-rgb: 233, 69, 96;
--adn-color-accent-alt: #fff;
--adn-waveform-color-playhead: #e94560;
--adn-waveform-playhead-width: 2px;
--adn-radius: 12px;
--adn-padding: 0.5rem;
--adn-coverart-transform: none;
--adn-coverart-radius: 8px;
--adn-playbutton-radius: 8px;
}
```

```
<audiodn-player
class="theme-midnight"
api-key="YOUR_API_KEY"
scope="collection"
id="COLLECTION_ID"
variants="hq,lq"
size="regular"
></audiodn-player>
```

### Electric (einzelner Track)

```
.theme-electric {
--adn-bg: #0a0a0f;
--adn-bg-light: #16161f;
--adn-color-font: #e4e4f0;
--adn-color-font-muted: #7878a0;
--adn-color-accent: #00d4ff;
--adn-color-accent-rgb: 0, 212, 255;
--adn-color-accent-alt: #0a0a0f;
--adn-radius: 4px;
--adn-main-border: 1px solid #00d4ff33;
--adn-box-shadow: 0 0 20px #00d4ff15;
--adn-waveform-color-playhead: #00d4ff;
--adn-waveform-playhead-width: 2px;
--adn-coverart-transform: none;
--adn-coverart-radius: 2px;
--adn-playbutton-radius: 4px;
}
```

```
<audiodn-player
class="theme-electric"
api-key="YOUR_API_KEY"
scope="track"
id="TRACK_ID"
variants="hq,lq"
size="regular"
></audiodn-player>
```