Irene Soler
Nota de voz · 10:42
0:000:24
HTML + CSSCards
Voice note with waveform
An audio message whose waveform bars fill in as it plays; tap or drag across the wave to jump, and change the speed.
Settings
16px
1x
Code
<article class="uvq07-vn"><header><span class="av" aria-hidden="true">IS</span><div><h3>Irene Soler</h3><p>Voice note · 10:42</p></div></header><div class="bb"><button type="button" class="pl" aria-pressed="false" aria-label="Play"><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="Audio position" 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="Speed">1×</button></div><p class="tm"><span class="cu">0:00</span><span>0:24</span></p></article>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
See all CardsWhere to use it
Voice messages are part of everyday chat, and their waveform is the whole interface. Here thirty-four bars with fixed heights fill with color as playback runs, a dot marks the position, and the wave works as an accessible slider with pointer drag and arrow keys. A speed pill cycles 1×, 1.5× and 2×. Good for chat UIs, support widgets and podcast snippets.
The main color is the bubble tint, the bars and the play button, the second color the avatar gradient. Set the real duration in the script and connect it to an audio element when you need sound.