# Get Started with AudioDN | Choose Your Audio Integration

> Configure audio outputs and choose the right AudioDN integration for your website, SaaS platform, mobile app, or custom audio workflow.

Source: https://audiodeliverynetwork.com/get-started/

---

Recommended architecture

### Web Components

Why it fits

Add uploading and playback with maintained web components and scoped client-side credentials. No application backend is required.

Upload approach

The AudioDN uploader component sends files directly, authorized by a scoped Client-Side Upload key.

Playback approach

The AudioDN player component uses a scoped Client-Side Player key and renews playback sessions automatically.

Credential or session model

-   Client-Side Upload key
-   Client-Side Player key

AudioDN handles

-   Upload interface
-   Player interface
-   Session creation
-   Direct audio upload
-   Playback delivery
-   Variant selection

Your team handles

-   Page layout
-   Product content
-   Collection configuration
-   Choosing which audio is displayed

Conceptual flow

1.  User
2.  AudioDN component
3.  Scoped Client-Side key
4.  AudioDN upload or playback session

See the basic flow

```html
<script type="module">
  import '@audiodn/components/uploader'
  import '@audiodn/components/player'
</script>

<audiodn-uploader
  api-key="CLIENT_SIDE_UPLOAD_KEY"
  collection-id="COLLECTION_ID"
></audiodn-uploader>

<audiodn-player
  api-key="CLIENT_SIDE_PLAYER_KEY"
  scope="collection"
  id="COLLECTION_ID"
></audiodn-player>
```

[View the Web integration guide](/docs/integration/web)