# Recorder-Komponente | AudioDN Docs

> Sprachaufnahme im Browser mit Live-Wellenform, Vorschau-Player und direktem Upload zu AudioDN.

Source: https://audiodeliverynetwork.com/de/docs/components/recorder/

---

# Recorder

Nehmen Sie Mikrofon-Audio im Browser auf, prüfen Sie es mit einem Mini-Player und einer Wellenform und laden Sie dann einen Track zu AudioDN hoch.

## Verwendung

Installieren Sie von npm und importieren Sie die Komponente, dann platzieren Sie das Element auf Ihrer Seite. Geben Sie einen Client-Side-Upload-API-Key und optional eine Collection-ID zum Hochladen an. Mit einem `api-key` erstellt der Recorder die Upload-Session **und** den Track in einer Anfrage und lädt die Aufnahme dann per PUT hoch. Wenn der API-Key auf eine Sammlung beschränkt ist, wird die Collection-ID automatisch aufgelöst.

Die Aufnahme startet nach einem kurzen 3‑2‑1-Countdown, und Dateinamen werden automatisch aus dem UTC-Zeitstempel erzeugt. Der Browser wählt einen unterstützten MIME-Typ und bevorzugt Opus in WebM/Ogg, dann MP4/AAC auf Safari.

Wenn die Aufnahme fertig übertragen ist, löst die Komponente `file-uploaded` mit der neuen `trackId` aus. Das bedeutet, dass die Bytes den Speicher erreicht haben — nicht, dass die Verarbeitung abgeschlossen ist. Fragen Sie `GET /v1/track/:track_id` ab, bis `track_status_id` gleich `ready` ist (oder warten Sie auf einen Track-Webhook), bevor Sie die Wiedergabe starten.

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

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

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

Lieber ohne Build-Schritt? Laden Sie es stattdessen direkt von einem CDN:

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

### Attribute

| Attribut | Typ | Standard | Beschreibung |
| --- | --- | --- | --- |
| `api-key` | string | — | Client-Side-Upload-API-Key (sicher für die Verwendung im Frontend-Code). Erstellt Session und Track beim Senden. Entweder `api-key` oder `upload-session-id` ist erforderlich. |
| `upload-session-id` | string | — | Vom Server bereitgestellte Upload-Session-ID. Verwenden Sie dies, wenn Ihr Server die Sessions im Namen des Clients erstellt. Entweder `upload-session-id` oder `api-key` ist erforderlich. |
| `collection-id` | string | — | Ziel-Sammlung, in die der Track hochgeladen wird (mit `api-key` verwendet). Optional, wenn der API-Key auf eine Sammlung beschränkt ist. |
| `accent-color` | string | `”#fe008a”` | Akzentfarbe für die Aufnahmeschaltfläche, die Wellenform und die Bedienelemente. Ein 6-stelliger Hex-Wert wird bevorzugt (wird beim Upload über `api-key` auch als `player_color` gesendet). Wenn nicht angegeben, wird die `player_color` der Sammlung/Organisation verwendet. |
| `theme` | string | `”auto”` | Farbthema: `“dark”` (weißer Text auf dunklem Hintergrund), `“light”` (dunkler Text auf sanftem hellgrauem Hintergrund) oder `“auto”`. `“auto”` folgt der `prefers-color-scheme`\-Einstellung des Betriebssystems/Browsers des Besuchers und wechselt live, wenn sie sich ändert. Einzelne CSS-Custom-Properties (siehe Themes) überschreiben weiterhin die Palette. |
| `locale` | string | `”en”` | UI-Sprache. Werte: `en`, `fr`, `es`, `de`. |
| `countdown` | number | `3` | Länge des Countdowns vor der Aufnahme (`3` → 3‑2‑1). Setzen Sie ihn auf `0`, um den Countdown zu überspringen und sofort aufzunehmen. |
| `max-duration` | number | `0` | Maximale Aufnahmelänge in Sekunden. `0` (oder weggelassen) bedeutet unbegrenzt; die Aufnahme stoppt automatisch, wenn das Limit erreicht ist. |
| `auto-hide` | boolean | `false` | Setzt das Host-Element nach einem erfolgreichen Upload auf `display: none`. Entfernen Sie den Inline-Stil (oder mounten Sie das Element neu), um es wieder anzuzeigen. |
| `disabled` | boolean | `false` | Deaktiviert die Aufnahmebedienelemente, wenn gesetzt. |

### Ereignisse

Alle Ereignisse propagieren (bubble) und sind composed (überqueren das Shadow DOM). Hören Sie auf `file-uploaded`, wenn der Upload abgeschlossen ist — dies ist das „Upload abgeschlossen“-Signal für Hosts und bedeutet **nicht**, dass die Verarbeitung `ready` ist.

```
<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>
```

| Ereignis | `detail` | Ausgelöst, wenn |
| --- | --- | --- |
| `recording-started` | — | Die Mikrofonaufnahme hat tatsächlich begonnen (nach dem Countdown, falls vorhanden). |
| `recording-stopped` | `{ blob, duration }` | Die Aufnahme ist beendet; die Vorschau ist bereit. |
| `recording-discarded` | — | Der Benutzer hat den Clip verworfen (oder mitten in Aufnahme / Countdown abgebrochen). |
| `upload-progress` | `{ percent }` | Upload-Fortschritt (0–100). |
| `file-uploaded` | `{ trackId, fileName, blob }` | Die Bytes wurden fertig in den Speicher hochgeladen. Bedeutet **nicht**, dass der Track `ready` ist. |
| `session-error` | `{ error }` | Eine bestehende Upload-Session konnte nicht abgerufen werden. |
| `adn-session-refreshed` | `{ uploadSessionId }` | Beim Senden wurde eine neue Session erstellt (der `api-key`\-Pfad). |
| `adn-session-expired` | `{ uploadSessionId }` | Eine zuvor erstellte Session ist abgelaufen. |

## Standard

Zum Aufnehmen tippen, den Clip prüfen und dann senden. Erfordert einen API-Key und eine Collection-ID.

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

## Countdown & maximale Dauer

Verwenden Sie `countdown`, um den 3‑2‑1-Timer vor der Aufnahme festzulegen (oder `0`, um sofort zu starten), und `max-duration`, um nach einer Anzahl von Sekunden automatisch zu stoppen. Dieses Beispiel zählt von 2 herunter und begrenzt Aufnahmen auf 30 Sekunden.

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

## Themes

Der schnellste Weg, zwischen Hell und Dunkel zu wechseln, ist das oben dokumentierte `theme`\-Attribut (`“auto”`, `“dark”` oder `“light”`) — `“auto”` folgt der Systemeinstellung des Besuchers. Für feinere Kontrolle können Sie weiterhin CSS-Custom-Properties am Host überschreiben, um den Recorder umzugestalten — mit derselben `—adn-*`\-API wie beim Player.

### Hell / Dunkel (Systemeinstellung)

```
.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>
```

### Midnight

```
.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>
```