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/componentsimport '@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>