Irene Soler

Nota de voz · 10:42

0:000:24

HTML + CSSKarten

Sprachnachricht mit Wellenform

Eine Audionachricht, deren Wellenbalken sich beim Abspielen füllen; tippe oder ziehe über die Welle, um zu springen.

Einstellungen

16px
1x

Code

<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>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Karten

Alle ansehen: Karten

Wofür du ihn nutzen kannst

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.