# Componente Player | Docs de AudioDN

> Componente de reproductor de audio con arte de portada, visualización de forma de onda y soporte de lista de pistas. Explora tamaños, playlists y personalización de temas.

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

---

# 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/components
```

```
import '@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](/docs/components/waveform#waveform-usage) 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>
```