Recorder

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

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

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>

Variantes

Utilisez variant=“inline” pour un enregistreur compact à deux boutons qui s’intègre dans des espaces restreints comme une zone de commentaire ou un éditeur de chat. Il n’affiche toujours que deux commandes : un bouton d’enregistrement (qui s’anime pendant l’enregistrement) et un menu contextuel qui s’adapte à chaque étape — choisir un microphone, prévisualiser ou supprimer. Définissez height pour ajuster la taille des boutons carrés et de la pilule environnante.

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

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.

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