Irene Soler
Nota de voz · 10:42
0:000:24
Nota de voz · 10:42
0:000:24
Eine Audionachricht, deren Wellenbalken sich beim Abspielen füllen; tippe oder ziehe über die Welle, um zu springen.
<article class="uvq07-vn"><header><span class="av" aria-hidden="true">IS</span><div><h3>Irene Soler</h3><p>Sprachnachricht · 10:42</p></div></header><div class="bb"><button type="button" class="pl" aria-pressed="false" aria-label="Abspielen"><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="Wiedergabeposition" 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="Geschwindigkeit">1×</button></div><p class="tm"><span class="cu">0:00</span><span>0:24</span></p></article>Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Sprachnachrichten gehören zum Chat-Alltag, und ihre Wellenform ist die ganze Bedienung. Hier färben sich vierunddreißig Balken fester Höhe während der Wiedergabe, ein Punkt markiert die Position, und die Welle ist ein barrierearmer Slider mit Ziehen und Pfeiltasten. Eine Pille schaltet zwischen 1×, 1,5× und 2×. Gut für Chat-Oberflächen, Support-Widgets und Podcast-Ausschnitte.
Die Hauptfarbe tönt Blase, Balken und Play-Button, die zweite Farbe steckt im Avatar-Verlauf. Trage im Skript die echte Dauer ein und verbinde es mit einem Audio-Element, wenn Ton gebraucht wird.