- ¿Me mandas un audio con la dirección?
Nota de voz manteniendo pulsado
Mantén el micro para grabar con onda y contador; desliza a la izquierda para descartar o suelta para enviar la nota.
Ajustes
Código
<div class="uvq15-voc"><ol class="ls" aria-live="polite"><li class="in"><span>¿Me mandas un audio con la dirección?</span></li></ol><div class="bar"><div class="ip"><span class="ph">Mantén el micro para grabar</span><span class="rec" aria-hidden="true"><i class="dot"></i><span class="tm">0:00</span><span class="wv"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span><span class="cx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg><span>Desliza para cancelar</span></span></span></div><button type="button" class="mc" aria-label="Mantén pulsado para grabar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg></button></div><p class="sr" aria-live="assertive"></p></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Las notas de voz dependen de un solo gesto mantenido, y este bloque recrea todo el flujo. Mientras sostienes el micro, crece en rojo con un pulso, un contador avanza y una onda se desplaza con niveles en vivo; si deslizas a la izquierda pasado el aviso, se descarta. Al soltar sale una burbuja verde con la onda grabada, botón de reproducir y duración.
El color principal es el micro y tus burbujas, y el secundario el estado de grabación. Aquí los niveles son aleatorios; cámbialos por valores de la API Web Audio cuando grabes de verdad. Con teclado, mantener Espacio o Intro graba y Escape descarta.