HTML + CSSChamps
Recherche avec dictée vocale
Touche le micro : le champ affiche des ondes sonores et écrit ce que tu dis lettre par lettre.
Réglages
16px
1x
Code
<div class="uv-ivo"><label class="fd"><span class="sr">Cherche ou dicte</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="Cherche ou dicte"><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="Dicter"><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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Champs
Voir tout : ChampsOù l’utiliser
La saisie vocale est courante sur mobile, et un état d'enregistrement clair aide à lui faire confiance. Quand on touche le micro, il passe au rouge avec un anneau qui pulse, des barres sonores animées apparaissent dans le champ, une ligne d'état indique l'écoute et la transcription s'écrit lettre par lettre. Un second appui annule.
La démo tape une phrase d'exemple ; le script indique où brancher l'API de reconnaissance vocale du navigateur. Le micro est un bouton avec aria-pressed.