Voice Note Testimonials Block for React

Add an audio field to each entry in NOTES, and in toggle call play() or pause() on an Audio object (kept in a ref) next to setPlaying. Call finish from the audio's ended event rather than letting the transition end it. To make the sweep match the real length, set duration-[5000ms] in SWEEP to the recording's running time, or drive the layer's clip-path from timeupdate.

People read in places where they can't listen, and a transcript is how screen reader users and people who are deaf or hard of hearing get the message. Each note's transcript is its quote: a blockquote in the note's figure, with the speaker named in the figcaption. Replace transcript with the real words of each recording. The toggle is a Collapsible: the trigger announces whether it is expanded, and the transcript animates open and closed (instantly with reduced motion).

Yes. The play button is a toggle: it shows a pause mark while its note plays and stops and resets the waveform when pressed again. Only one note plays at a time, and nothing starts on its own.

The sweep doesn't animate: pressing play shows the waveform at the halfway point and holds it until the button is pressed again. The transcript opens and closes instantly.

Each play button is named "Demo player: Lucia Ferreira's voice note" and announces whether it is pressed; Space or Enter toggles it. A hidden polite status line says "Playing a silent demo of Lucia Ferreira's voice note", "Stopped…" or "The demo ended" after a press, and says nothing on load. The waveform is decorative and hidden. The transcript button is named "Transcript of Lucia Ferreira's voice note".

On a phone the window goes under the text, the small avatars are dropped so the bubbles get the full width and the waveform shrinks to fit, with nothing scrolling sideways at 320 px. In right-to-left languages the window, the bubbles, the sweep and the toggle mirror, while the play mark keeps pointing forward, as media controls do, and each time and quote keeps its own order through bdi.

Change the href of the call to action beside the window. Say where it goes in its label, such as "Hear more voice notes". It's a Shine Button, the one primary control in the block, and a diagonal band of light crosses it once on hover or focus (it fades in instead with reduced motion). On Base UI, the link renders through render={<a href="…" />} with nativeButton={false}.