Recorder

Uso

Instala desde npm e importa el componente, luego coloca el elemento en tu página. Proporciona una clave API de subida del lado del cliente y, opcionalmente, un ID de colección al que subir. Con una api-key, la grabadora crea la sesión de subida y la pista en una sola petición, y luego sube la grabación (PUT). Si la clave API está limitada a una colección, el ID de colección se resuelve automáticamente.

La grabación comienza tras una breve cuenta atrás 3‑2‑1, y los nombres de archivo se generan automáticamente a partir de la marca de tiempo UTC. El navegador elige un tipo MIME compatible, prefiriendo Opus en WebM/Ogg, luego MP4/AAC en Safari.

Cuando la grabación termina de transferirse, el componente dispara file-uploaded con el nuevo trackId. Eso significa que los bytes llegaron al almacenamiento — no que el procesamiento haya terminado. Consulta GET /v1/track/:track_id hasta que track_status_id sea ready (o escucha un webhook de pista) antes de iniciar la reproducción.

npm install @audiodn/components

import '@audiodn/components/recorder'

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

¿Prefieres sin paso de compilación? Cárgalo directamente desde un CDN:

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

Atributos

Eventos

Todos los eventos se propagan y son compuestos (cruzan el shadow DOM). Escucha file-uploaded cuando la subida finaliza — esta es la señal de «subida completa» para los anfitriones y no significa que el procesamiento 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>

Predeterminado

Toca para grabar, previsualiza el clip y luego envíalo. Requiere una clave API y un ID de colección.

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

Cuenta atrás y duración máxima

Usa countdown para fijar el temporizador 3‑2‑1 previo a la grabación (o 0 para empezar de inmediato), y max-duration para detener automáticamente tras un número de segundos. Este ejemplo cuenta atrás desde 2 y limita las grabaciones a 30 segundos.

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

Variantes

Usa variant=“inline” para un grabador compacto de dos botones que encaja en línea en espacios reducidos como un cuadro de comentarios o un editor de chat. Siempre muestra solo dos controles: un botón de grabación (que se anima durante la grabación) y un menú contextual que se adapta a cada paso: elegir micrófono, vista previa o eliminar. Ajusta height para escalar los botones cuadrados y la píldora que los rodea.

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

Temas

La forma más rápida de alternar entre claro y oscuro es el atributo theme (“auto”, “dark” o “light”) documentado arriba — “auto” sigue la preferencia del sistema del visitante. Para un control más fino, aún puedes sobrescribir propiedades CSS personalizadas en el anfitrión para reestilizar la grabadora, con la misma API —adn-* que el reproductor.

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