- ¿Me mandas un audio con la dirección?
Hold to record voice note
Hold the mic to record with a live waveform and timer; slide left to discard, or release to send a playable note.
Settings
Code
<div class="uvq15-voc"><ol class="ls" aria-live="polite"><li class="in"><span>Can you send me a voice note with the address?</span></li></ol><div class="bar"><div class="ip"><span class="ph">Hold the mic to record</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>Slide to cancel</span></span></span></div><button type="button" class="mc" aria-label="Hold to record"><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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Microinteractions
See all MicrointeractionsWhere to use it
Voice notes rely on a single held gesture, and this block recreates the whole flow. While the mic is held it grows red with a pulse, a timer counts and a waveform scrolls with live levels; sliding left past the hint cancels the take. Releasing sends a green bubble with the recorded waveform, a play button and its duration.
The main color is the mic and your bubbles, the secondary one the recording state. The levels are random here; replace them with values from the Web Audio API when you record for real. Space or Enter held on the keyboard records, and Escape discards.