# Uploading tracks | AudioDN Docs

> Choose who creates the upload session and whether you use the AudioDN Uploader or (voice) Recorder web components or a custom web or native interface.

Source: https://audiodeliverynetwork.com/docs/integration/uploading/

---

# Uploading tracks

Choose who creates or authorizes the upload session, then — if your server creates it — how files are transferred. Playback is a separate decision; see [Playing and accessing tracks](/docs/integration/playback).

#### Per-file upload lifecycle

An upload session may authorize many files, but each file needs its own track and upload URL. Create the session, then for each file call `POST /v1/upload/{upload_session_id}/track` and `PUT` the bytes to `track_upload.upload_url`. Optionally include a nested `track` on session create for the first file. Full reference: [Upload Sessions](/docs/api/upload-sessions).

## Uploading tracks

Choose who creates the upload session, then — if needed — how files are transferred. Upload and playback choices are independent.

Who should create or authorize the upload session?

 Selected AudioDN Uploader or (voice) Recorder web components Fastest setup. Drop-in web components with a scoped Client-Side Upload key; they handle session creation and file transfer. The (voice) Recorder captures from the microphone. Selected Your browser or native application A scoped Client-Side Upload key. Your app creates the upload session and uploads each file to the provided URL.  Selected Your server An API Access key on your server. Your server applies application-specific authorization and creates a short-lived upload session.

How should the user transfer the files?

 Selected AudioDN Uploader or (voice) Recorder web components Pass the server-created upload session to the AudioDN Uploader or (voice) Recorder web components. Selected Custom browser or native upload interface Use the provided upload information in your own upload UI.

## AudioDN Uploader or (voice) Recorder web components with a Client-Side Upload key

Fastest setup. Drop-in web components with a scoped Client-Side Upload key; they create the session and upload each file. The (voice) Recorder captures from the microphone.

1

#### Create a Client-Side Upload key

In the [dashboard](https://account.audiodeliverynetwork.com) go to **Settings → API Keys** and create a **Client-Side Upload** key. Optionally scope it to a collection. This key can only create upload sessions — not read or delete tracks.

2

#### Install the web component

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

Uploader:

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

Or (voice) Recorder:

```
import '@audiodn/components/recorder'
```

CDN alternatives:

```
<script type="module" src="https://unpkg.com/@audiodn/components@latest/dist/uploader.js"></script>
```

```
<script type="module" src="https://unpkg.com/@audiodn/components@latest/dist/recorder.js"></script>
```

3

#### Render the web component

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

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

If the key is scoped to a collection, you can omit `collection-id`. Never set both `api-key` and `upload-session-id`. The (voice) Recorder uses the microphone to capture audio in the browser.

4

#### What the web component does

For each file, the web component creates (or reuses) an upload session, calls `POST /v1/upload/:upload_session_id/track`, and uploads the bytes to `track_upload.upload_url`. AudioDN then processes your configured variants.

Optional: configure a [track-processing webhook](/docs/webhooks/track-processing) to learn when a track is ready.