HTML + CSSInputs
Input con dictado por voz
Pulsa el micrófono: el campo muestra ondas de sonido y escribe lo que dices letra a letra.
Ajustes
16px
1x
Código
<div class="uv-ivo"><label class="fd"><span class="sr">Busca o dicta</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></svg><input type="search" placeholder="Busca o dicta"><span class="wv" aria-hidden="true"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i><i style="--i:11"></i><i style="--i:12"></i><i style="--i:13"></i></span></label><button type="button" class="mc" aria-pressed="false" aria-label="Dictar"><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.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21"/></svg></button><p class="st" aria-live="polite"></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 Inputs
Ver todos: InputsDónde usarlo
Dictar es habitual en el móvil y un estado de grabación claro ayuda a confiar en él. Al pulsar el micrófono, se vuelve rojo con un anillo que late, aparecen barras de sonido animadas dentro del buscador, una línea de estado dice que está escuchando y la transcripción se escribe letra a letra. Al pulsar otra vez se cancela.
La demo escribe una frase de ejemplo; el script marca dónde conectar la API de reconocimiento de voz del navegador. El micrófono es un botón con aria-pressed y el estado se anuncia a los lectores de pantalla.