Irene Soler
Nota de voz · 10:42
0:000:24
Nota de voz · 10:42
0:000:24
Un message audio dont les barres d'onde se remplissent pendant la lecture ; touche ou fais glisser sur l'onde pour sauter.
<article class="uvq07-vn"><header><span class="av" aria-hidden="true">IS</span><div><h3>Irene Soler</h3><p>Message vocal · 10:42</p></div></header><div class="bb"><button type="button" class="pl" aria-pressed="false" aria-label="Lire"><svg class="py" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor"/></svg><svg class="pa" viewBox="0 0 24 24" aria-hidden="true"><rect x="6.5" y="5.5" width="3.8" height="13" rx="1" fill="currentColor"/><rect x="13.7" y="5.5" width="3.8" height="13" rx="1" fill="currentColor"/></svg></button><div class="wv" role="slider" tabindex="0" aria-label="Position de l’audio" aria-valuemin="0" aria-valuemax="24" aria-valuenow="0" aria-valuetext="0:00"><i style="--h:0.22"></i><i style="--h:0.48"></i><i style="--h:0.76"></i><i style="--h:0.74"></i><i style="--h:0.75"></i><i style="--h:0.65"></i><i style="--h:0.44"></i><i style="--h:0.53"></i><i style="--h:0.67"></i><i style="--h:0.98"></i><i style="--h:0.83"></i><i style="--h:0.36"></i><i style="--h:0.61"></i><i style="--h:0.59"></i><i style="--h:0.88"></i><i style="--h:0.77"></i><i style="--h:0.75"></i><i style="--h:0.33"></i><i style="--h:0.72"></i><i style="--h:0.63"></i><i style="--h:0.98"></i><i style="--h:0.70"></i><i style="--h:0.51"></i><i style="--h:0.54"></i><i style="--h:0.56"></i><i style="--h:0.75"></i><i style="--h:0.94"></i><i style="--h:0.65"></i><i style="--h:0.65"></i><i style="--h:0.57"></i><i style="--h:0.61"></i><i style="--h:0.87"></i><i style="--h:0.69"></i><i style="--h:0.67"></i></div><button type="button" class="sp" aria-label="Vitesse">1×</button></div><p class="tm"><span class="cu">0:00</span><span>0:24</span></p></article>Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Les messages vocaux font partie du chat quotidien et leur forme d'onde est toute l'interface. Ici, trente-quatre barres de hauteur fixe se colorent pendant la lecture, un point marque la position et l'onde sert de curseur accessible au glisser et aux flèches. Une pastille alterne entre 1×, 1,5× et 2×. Pour interfaces de chat, widgets d'assistance et extraits de podcast.
La couleur principale teinte la bulle, les barres et le bouton, la seconde le dégradé de l'avatar. Indique la vraie durée dans le script et relie-le à un élément audio si tu as besoin du son.