Irene Soler

Nota de voz · 10:42

0:000:24

HTML + CSSCards

Nota de voz con onda

Un mensaje de audio con barras de onda que se rellenan al reproducir; toca o arrastra sobre la onda para saltar.

Ajustes

16px
1x

Código

<article class="uvq07-vn"><header><span class="av" aria-hidden="true">IS</span><div><h3>Irene Soler</h3><p>Nota de voz · 10:42</p></div></header><div class="bb"><button type="button" class="pl" aria-pressed="false" aria-label="Reproducir"><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="Posición del 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="Velocidad">1×</button></div><p class="tm"><span class="cu">0:00</span><span>0:24</span></p></article>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Cards

Ver todos: Cards

Dónde usarlo

Los mensajes de voz forman parte del chat diario y su onda es toda la interfaz. Aquí treinta y cuatro barras de altura fija se colorean al reproducir, un punto marca la posición y la onda funciona como un slider accesible con arrastre y flechas. Una píldora cambia entre 1×, 1,5× y 2×. Sirve para interfaces de chat, widgets de soporte y fragmentos de pódcast.

El color principal tiñe la burbuja, las barras y el botón; el secundario entra en el degradado del avatar. Pon la duración real en el script y conéctalo a un elemento audio cuando necesites sonido.