# Composant Recorder | Docs AudioDN

> Enregistreur vocal dans le navigateur avec forme d

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

---

# Recorder

Capturez l’audio du microphone dans le navigateur, prévisualisez-le avec un mini lecteur et une forme d’onde, puis envoyez une piste vers AudioDN.

## Utilisation

Installez depuis npm et importez le composant, puis placez l’élément dans votre page. Fournissez une clé API d’envoi côté client et, optionnellement, un identifiant de collection vers laquelle envoyer. Avec une `api-key`, l’enregistreur crée la session d’envoi **et** la piste en une seule requête, puis transfère l’enregistrement (PUT). Si la clé API est limitée à une collection, l’identifiant de collection est résolu automatiquement.

L’enregistrement démarre après un court compte à rebours 3‑2‑1, et les noms de fichiers sont générés automatiquement à partir de l’horodatage UTC. Le navigateur choisit un type MIME pris en charge, en privilégiant Opus dans WebM/Ogg, puis MP4/AAC sur Safari.

Lorsque l’enregistrement a fini d’être transféré, le composant déclenche `file-uploaded` avec le nouveau `trackId`. Cela signifie que les octets ont atteint le stockage — pas que le traitement est terminé. Interrogez `GET /v1/track/:track_id` jusqu’à ce que `track_status_id` soit `ready` (ou écoutez un webhook de piste) avant de démarrer la lecture.

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

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

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

Vous préférez sans étape de build ? Chargez-le directement depuis un CDN à la place :

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

### Attributs

| Attribut | Type | Défaut | Description |
| --- | --- | --- | --- |
| `api-key` | string | — | Clé API d’envoi côté client (sûre à utiliser dans le code front-end). Crée la session et la piste lors de l’envoi. `api-key` ou `upload-session-id` est requis. |
| `upload-session-id` | string | — | Identifiant de session d’envoi fourni par le serveur. Utilisez-le lorsque votre serveur crée les sessions pour le compte du client. `upload-session-id` ou `api-key` est requis. |
| `collection-id` | string | — | Collection cible vers laquelle envoyer la piste (utilisé avec `api-key`). Optionnel lorsque la clé API est limitée à une collection. |
| `accent-color` | string | `”#fe008a”` | Couleur d’accentuation du bouton d’enregistrement, de la forme d’onde et des contrôles. Un hex à 6 chiffres est préférable (également envoyé comme `player_color` lors d’un envoi via `api-key`). Si omise, la `player_color` de la collection/organisation est utilisée. |
| `theme` | string | `”auto”` | Thème de couleur : `“dark”` (texte blanc sur fond sombre), `“light”` (texte sombre sur fond gris clair doux), ou `“auto”`. `“auto”` suit le réglage `prefers-color-scheme` du système / navigateur du visiteur et bascule en direct lorsqu’il change. Les propriétés CSS personnalisées individuelles (voir Thèmes) remplacent toujours la palette. |
| `locale` | string | `”en”` | Langue de l’interface. Valeurs : `en`, `fr`, `es`, `de`. |
| `countdown` | number | `3` | Durée du compte à rebours avant enregistrement (`3` → 3‑2‑1). Mettez `0` pour ignorer le compte à rebours et démarrer immédiatement. |
| `max-duration` | number | `0` | Durée maximale d’enregistrement en secondes. `0` (ou omis) signifie illimité ; l’enregistrement s’arrête automatiquement à l’atteinte de la limite. |
| `auto-hide` | boolean | `false` | Après un envoi réussi, applique `display: none` à l’élément hôte. Effacez le style inline (ou remontez l’élément) pour l’afficher à nouveau. |
| `disabled` | boolean | `false` | Désactive les contrôles d’enregistrement lorsqu’il est défini. |

### Événements

Tous les événements se propagent et sont composés (traversent le shadow DOM). Écoutez `file-uploaded` lorsque l’envoi se termine — c’est le signal « envoi terminé » pour les hôtes et cela ne signifie **pas** que le traitement est `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>
```

| Événement | `detail` | Déclenché quand |
| --- | --- | --- |
| `recording-started` | — | La capture du microphone a réellement commencé (après le compte à rebours, le cas échéant). |
| `recording-stopped` | `{ blob, duration }` | L’enregistrement est terminé ; l’aperçu est prêt. |
| `recording-discarded` | — | L’utilisateur a supprimé le clip (ou annulé en cours d’enregistrement / de compte à rebours). |
| `upload-progress` | `{ percent }` | Progression de l’envoi (0–100). |
| `file-uploaded` | `{ trackId, fileName, blob }` | Les octets ont fini d’être envoyés au stockage. Ne signifie **pas** que la piste est `ready`. |
| `session-error` | `{ error }` | Une session d’envoi existante n’a pas pu être récupérée. |
| `adn-session-refreshed` | `{ uploadSessionId }` | Une nouvelle session a été créée lors de l’envoi (le parcours `api-key`). |
| `adn-session-expired` | `{ uploadSessionId }` | Une session pré-créée a expiré. |

## Par défaut

Appuyez pour enregistrer, prévisualisez le clip, puis envoyez-le. Nécessite une clé API et un identifiant de collection.

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

## Compte à rebours et durée maximale

Utilisez `countdown` pour définir le minuteur 3‑2‑1 avant enregistrement (ou `0` pour démarrer immédiatement), et `max-duration` pour arrêter automatiquement après un certain nombre de secondes. Cet exemple compte à rebours à partir de 2 et limite les enregistrements à 30 secondes.

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

## Thèmes

Le moyen le plus rapide de basculer entre clair et sombre est l’attribut `theme` (`“auto”`, `“dark”` ou `“light”`) documenté ci-dessus — `“auto”` suit la préférence système du visiteur. Pour un contrôle plus fin, vous pouvez toujours surcharger les propriétés CSS personnalisées sur l’hôte pour restyliser l’enregistreur, avec la même API `—adn-*` que le lecteur.

### Clair / Sombre (préférence système)

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