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/componentsimport '@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 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>