# Web Components | AudioDN Docs

> Use AudioDN Uploader, Recorder, Player, and Waveform components for upload, recording, and playback UI.

Source: https://audiodeliverynetwork.com/docs/integration/web-components/

---

# Web Components

Use maintained AudioDN UI for uploading, recording, playback, and waveform display without building that chrome yourself.

## When to use it

-   Websites and apps that want a ready-made upload or player experience
-   Quick prototypes that still use production AudioDN processing and delivery
-   Hybrid setups where a component handles UI and your server still creates sessions

## Authentication

-   **Uploader / Recorder** — Client-Side Upload key, or a server-created `upload-session-id`
-   **Player** — Client-Side Player key, or a server-created `play-session-id`
-   Never put an API Access key in browser code
-   Never set both `api-key` and a session ID on the same component

#### Layout vs delivery indexes

On the Player, `variant` is the layout (`default` or `inline`). Delivery indexes use `variants` (for example `variants=“hq”`). Newer packages also accept `outputs`; examples here use `variants` so they work with the site demo bundle and with current npm releases.

## Minimal example

Install the package, upload with the Uploader, then play with the Player:

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

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

```
<audiodn-uploader
  api-key="CLIENT-SIDE-UPLOAD-KEY"
  collection-id="COLLECTION-ID"
  accent-color="#ff00ff"
></audiodn-uploader>
```

```
<audiodn-player
  api-key="CLIENT-SIDE-PLAYER-KEY"
  scope="collection"
  id="COLLECTION-ID"
  variants="hq"
  size="large"
></audiodn-player>
```

Prefer microphone capture? Use the [Recorder](/docs/components/recorder) with the same Client-Side Upload key pattern, then continue with the [Voice & transcription](/docs/guides/voice) guide.

## Limits

-   Components are for browser UI — catalog management and signing stay on your server or dashboard
-   Do not feed signed delivery URLs into `<audiodn-player>`; use a key or play session
-   Attribute and event details live in the component references, not on this overview

Next: [Uploading audio](/docs/integration/uploading) · [Playback & delivery](/docs/integration/playback) · [Player reference](/docs/components/player) · [Uploader reference](/docs/components/uploader)