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 with the same Client-Side Upload key pattern, then continue with the Voice & transcription 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 · Playback & delivery · Player reference · Uploader reference