Player
Componente de reproductor de audio con arte de portada, forma de onda y soporte de lista de pistas.
Uso
Instálalo desde npm e importa el componente, luego inserta el elemento en tu página. Proporciona una clave API Client-Side y apúntalo a una pista o colección.
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>¿Prefieres sin paso de build? Cárgalo directamente desde un CDN:
<script type="module" src="https://unpkg.com/@audiodn/components@latest/dist/player.js"></script>Atributos
| Atributo | Tipo | Predeterminado | Descripción |
|---|---|---|---|
api-key | string | — | Clave API Client-Side (segura para usar en código front-end). Se requiere api-key o play-session-id. Cuando está definida, la sesión se renueva automáticamente antes de caducar. |
play-session-id | string | — | ID de sesión de reproducción aprovisionada en el servidor. Se requiere play-session-id o api-key. Úsalo cuando tu servidor crea sesiones en nombre del cliente. |
scope | string | — | “track” para una sola pista o “collection” para una playlist |
id | string | — | ID de pista o colección a reproducir |
variants | string | "" | Lista separada por comas de variantes de calidad de audio (p. ej. “hq,lq”) |
size | string | ”large” | Tamaño del player: “small”, “regular” o “large” |
theme | string | ”auto” | Tema de color: “dark” (texto blanco sobre fondo oscuro), “light” (texto oscuro sobre fondo gris claro suave) o “auto”. “auto” sigue la preferencia del sistema operativo / navegador prefers-color-scheme del visitante y cambia en vivo cuando cambia. El color de acento usa automáticamente la variante segura en contraste (player_color_dark o player_color_light) para el tema activo. Las propiedades CSS personalizadas individuales (ver Temas) siguen sobrescribiendo la paleta. |
volume | number | 0.7 | Nivel de volumen inicial (0–1) |
autoplay | boolean | false | Cuando está presente, la reproducción empieza automáticamente en cuanto se ha cargado la primera pista. Ten en cuenta que las políticas de autoplay del navegador pueden seguir exigiendo una interacción del usuario antes de poder reproducir audio con sonido. |
downloadable | boolean | false | Cuando está presente, se muestra una opción de descarga en el menú de ajustes para cada variante. Esto es solo una solicitud: el ajuste is_downloadable de la clave API es la puerta autoritativa. Si la clave no permite descargas, la opción sigue renderizándose pero la descarga se rechaza y se muestra un mensaje localizado “This track isn’t downloadable”. Establece el permiso de descarga de la clave desde el panel al crear una clave API de player. |
session-ttl | number | 3600 | Tiempo de vida de la sesión en segundos (predeterminado 3600 = 1 hora, mín 60, máx 86400). Cuando api-key está definida, la sesión se renueva automáticamente antes de caducar. |
waveform-* | — | — | Cualquier atributo del componente waveform se puede pasar con el prefijo waveform- (p. ej. waveform-variant, waveform-height, waveform-line-width) y se reenvía a la forma de onda interna. |
Tamaños
El atributo size controla el escalado del arte de portada, la tipografía y el botón de reproducción.
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
Una colección con varias pistas y una lista de pistas. Usa scope=“collection”.
<audiodn-player
api-key="YOUR_API_KEY"
scope="collection"
id="COLLECTION_ID"
variants="hq,lq"
size="regular"
></audiodn-player>Temas
La forma más rápida de cambiar entre claro y oscuro es el atributo theme
(“auto”, “dark” o “light”) documentado arriba —
“auto” sigue la preferencia del sistema del visitante y elige por ti la variante de acento
segura en contraste. Para un control más fino, aún puedes sobrescribir propiedades CSS personalizadas individuales en el
host para restilizar el player sin tocar los internos.
Light / Dark (preferencia del sistema)
.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 (pista individual)
.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>