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