shadcn.io is not affiliated with official shadcn/ui
Voice Note Testimonials Block for Svelte
Three customer voice messages in a framed chat window beside the heading and a Shine Button: a play button sweeps a waveform, and each note opens a transcript with the words that were said.
Installation
Overview
Show customers the way they actually reply: in a voice message. On the page's drafting lines, a heading, one sentence about Wickerlane (a made-up shared inbox), the Shine Button and a count of the notes with their total running time sit at the start, and a chat window with + marks on its corners sits beside them, holding three chat bubbles, each from a customer with their name and role. Every bubble holds a round play button, a small waveform, the message's length and a "Transcript" toggle that opens the words as a quote; the first transcript is open so the section reads at a glance. Pressing play sweeps a darker wave across the waveform for five seconds and then resets. It's a demo player and says so: no audio plays. It's built from Bubble, Message, Collapsible, Button, Avatar, Shine Button and Guides, with Lucide icons, one CSS transition for the sweep and your theme's tokens. For landing pages and customer-story pages that want social proof with a more personal feel than a quote card.
FAQ
How do I play real audio?
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.
Why does every voice note have a transcript?
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).
Can people pause or stop a note?
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.
What happens with reduced motion?
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.
How do screen readers and keyboards use it?
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".
How does it fit a phone, and a right-to-left page?
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.
How do I point the button at my page?
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).
The link renders its a through asChild, so the button's styles land on the link.