Player
Composant lecteur audio avec pochette, forme d’onde et prise en charge de listes de pistes.
Utilisation
Installez depuis npm et importez le composant, puis placez l’élément dans votre page. Fournissez une clé API côté client et pointez-le vers une piste ou une collection.
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>Vous préférez sans étape de build ? Chargez-le directement depuis un CDN à la place :
<script type="module" src="https://unpkg.com/@audiodn/components@latest/dist/player.js"></script>Attributs
| Attribut | Type | Défaut | Description |
|---|---|---|---|
api-key | string | — | Clé API côté client (peut être utilisée en toute sécurité dans le code front-end). Soit api-key, soit play-session-id est requis. Lorsqu’il est défini, la session est automatiquement renouvelée avant son expiration. |
play-session-id | string | — | Identifiant de session de lecture provisionné côté serveur. Soit play-session-id, soit api-key est requis. Utilisez ceci lorsque votre serveur crée des sessions pour le compte du client. |
scope | string | — | “track” pour une seule piste ou “collection” pour une playlist |
id | string | — | Identifiant de piste ou de collection à lire |
variants | string | "" | Liste séparée par des virgules des variantes de qualité audio (par ex. “hq,lq”) |
size | string | ”large” | Taille du lecteur : “small”, “regular”, ou “large” |
theme | string | ”auto” | Thème de couleur : “dark” (texte blanc sur fond sombre), “light” (texte sombre sur fond gris clair doux), ou “auto”. “auto” suit le réglage prefers-color-scheme du système d’exploitation / navigateur du visiteur et bascule en direct lorsqu’il change. La couleur d’accent utilise automatiquement la variante sûre pour le contraste (player_color_dark ou player_color_light) pour le thème actif. Les propriétés CSS personnalisées individuelles (voir Thèmes) remplacent toujours la palette. |
volume | number | 0.7 | Niveau de volume initial (0–1) |
autoplay | boolean | false | Lorsqu’il est présent, la lecture démarre automatiquement dès que la première piste est chargée. Notez que les politiques d’autoplay des navigateurs peuvent encore exiger une interaction utilisateur avant que l’audio puisse être lu avec le son. |
downloadable | boolean | false | Lorsqu’il est présent, une option de téléchargement est affichée dans le menu des paramètres pour chaque variante. Ce n’est qu’une demande : le réglage is_downloadable de la clé API est la porte d’autorité. Si la clé n’autorise pas les téléchargements, l’option s’affiche quand même mais le téléchargement est refusé et un message localisé « This track isn’t downloadable » est affiché. Définissez la permission de téléchargement de la clé depuis le tableau de bord lors de la création d’une clé API lecteur. |
session-ttl | number | 3600 | Durée de vie de la session en secondes (par défaut 3600 = 1 heure, min 60, max 86400). Lorsque api-key est défini, la session est automatiquement renouvelée avant son expiration. |
waveform-* | — | — | Tout attribut du composant waveform peut être passé avec un préfixe waveform- (par ex. waveform-variant, waveform-height, waveform-line-width) et est transmis à la forme d’onde interne. |
Tailles
L’attribut size contrôle la mise à l’échelle de la pochette, de la typographie et du bouton de lecture.
Small
<audiodn-player
api-key="YOUR_API_KEY"
scope="track"
id="TRACK_ID"
variants="hq,lq"
size="small"
></audiodn-player>Regular
<audiodn-player
api-key="YOUR_API_KEY"
scope="track"
id="TRACK_ID"
variants="hq,lq"
size="regular"
></audiodn-player>Large
<audiodn-player
api-key="YOUR_API_KEY"
scope="track"
id="TRACK_ID"
variants="hq,lq"
size="large"
></audiodn-player>Playlist
Une collection avec plusieurs pistes et une liste de pistes. Utilise scope=“collection”.
<audiodn-player
api-key="YOUR_API_KEY"
scope="collection"
id="COLLECTION_ID"
variants="hq,lq"
size="regular"
></audiodn-player>Thèmes
Le moyen le plus rapide de basculer entre clair et sombre est l’attribut theme
(“auto”, “dark”, ou “light”) documenté ci-dessus —
“auto” suit la préférence système du visiteur et choisit la variante d’accent
sûre pour le contraste pour vous. Pour un contrôle plus fin, vous pouvez toujours remplacer les propriétés CSS personnalisées individuelles sur
l’hôte pour restyler le lecteur sans toucher aux éléments internes.
Clair / Sombre (préférence système)
.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 (piste unique)
.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>