Recorder

Usage

Install from npm and import the component, then drop the element into your page. Provide a Client-Side upload API key and, optionally, a collection ID to upload into. With an api-key, the recorder creates the upload session and the track in one request, then PUTs the recording. If the API key is scoped to a collection, the collection ID is resolved automatically.

Recording starts after a short 3‑2‑1 countdown, and filenames are generated automatically from the UTC timestamp. By default the recorder targets codec=“opus”, bitrate=“64” (kbps), and mono (stereo unset). It tries codec-specific MIME types first, then falls back through WebM/Ogg Opus and MP4/AAC. If the browser rejects an explicit bitrate, recording continues without one.

Match these attributes to a manage transcode variant (for example Opus 64 kbps mono under index voice). When the uploaded source already matches that variant’s codec, channel layout, and bitrate, AudioDN can copy/remux instead of re-encoding — faster and cheaper for voice pipelines.

When the recording finishes transferring, the component fires file-uploaded with the new trackId. That means the bytes reached storage — not that processing is done. Poll GET /v1/track/:track_id until track_status_id is ready (or listen for a track webhook) before starting playback.

npm install @audiodn/components

import '@audiodn/components/recorder'

<audiodn-recorder
api-key="YOUR_API_KEY"
collection-id="COLLECTION_ID"
codec="opus"
bitrate="64"
></audiodn-recorder>

Prefer no build step? Load it straight from a CDN instead:

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

Attributes

Events

All events bubble and are composed (cross shadow DOM). Listen for file-uploaded when the upload finishes — this is the “upload complete” signal for hosts and does not mean processing is ready.

<audiodn-recorder
api-key="YOUR_API_KEY"
collection-id="COLLECTION_ID"
countdown="3"
auto-hide
></audiodn-recorder>

<script type="module">
const recorder = document.querySelector('audiodn-recorder')
recorder.addEventListener('file-uploaded', (e) => {
  const { trackId, fileName, blob } = e.detail
  console.log('uploaded', trackId, fileName, blob.size)
})
</script>

Default

Tap to record, preview the clip, then send it. Requires an API key and collection ID.

<audiodn-recorder
api-key="YOUR_API_KEY"
collection-id="COLLECTION_ID"
></audiodn-recorder>

Countdown & max duration

Use countdown to set the pre-record 3‑2‑1 timer (or 0 to start immediately), and max-duration to automatically stop after a number of seconds. This example counts down from 2 and caps recordings at 30 seconds.

<audiodn-recorder
api-key="YOUR_API_KEY"
collection-id="COLLECTION_ID"
countdown="2"
max-duration="30"
></audiodn-recorder>

Variants

Use variant=“inline” for a compact, two-button recorder that fits inline in tight spaces like a comment box or chat composer. It always shows just two controls: a record button (that animates while recording) and a contextual menu that adapts to each step — pick a microphone, preview, or delete. Set height to scale the square buttons and the surrounding pill.

.theme-recorder-mint {
--adn-bg: #134e4a;
--adn-bg-light: #115e59;
--adn-color-font: #f0fdfa;
--adn-color-font-muted: #99f6e4;
--adn-color-accent: #2dd4bf;
--adn-color-accent-rgb: 45, 212, 191;
--adn-color-accent-alt: #042f2e;
--adn-border-color: #0f766e;
--adn-main-border: 1px solid #0f766e;
}

<audiodn-recorder
variant="inline"
height="28"
theme="light"
api-key="YOUR_API_KEY"
collection-id="COLLECTION_ID"
></audiodn-recorder>

<audiodn-recorder
class="theme-recorder-mint"
variant="inline"
height="56"
accent-color="#2dd4bf"
api-key="YOUR_API_KEY"
collection-id="COLLECTION_ID"
></audiodn-recorder>

<audiodn-recorder
variant="inline"
height="72"
theme="dark"
api-key="YOUR_API_KEY"
collection-id="COLLECTION_ID"
></audiodn-recorder>

Themes

The quickest way to switch light and dark is the theme attribute (“auto”, “dark”, or “light”) documented above — “auto” follows the visitor’s system preference. For finer control you can still override CSS custom properties on the host to restyle the recorder, using the same —adn-* API as the player.

.theme-recorder-lightdark {
--adn-main-border: 1px solid light-dark(#ccc, #444);
--adn-bg: light-dark(#fff, #111);
--adn-bg-light: light-dark(#eee, #222);
--adn-color-font: light-dark(#222, #eee);
--adn-color-font-muted: light-dark(#666, #aaa);
--adn-color-accent: light-dark(#0066cc, #4da6ff);
--adn-color-accent-alt: light-dark(#fff, #111);
--adn-border-color: light-dark(#ccc, #444);
--adn-radius: 6px;
}

<audiodn-recorder
class="theme-recorder-lightdark"
api-key="YOUR_API_KEY"
collection-id="COLLECTION_ID"
></audiodn-recorder>

.theme-recorder-midnight {
--adn-bg: #1a1a2e;
--adn-bg-light: #2a2a4e;
--adn-color-font: #e0e0e0;
--adn-color-font-muted: #8888aa;
--adn-color-accent: #7c3aed;
--adn-color-accent-rgb: 124, 58, 237;
--adn-color-accent-alt: #fff;
--adn-border-color: #3a3a5e;
--adn-color-highlight: rgba(124, 58, 237, 0.12);
--adn-radius: 12px;
--adn-main-border: 1px solid #3a3a5e;
--adn-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

<audiodn-recorder
class="theme-recorder-midnight"
api-key="YOUR_API_KEY"
collection-id="COLLECTION_ID"
></audiodn-recorder>