Voice Message Thread
An audio thread of chat bubbles, each with a play control, waveform, and duration, plus an active note with elapsed time and a transcript preview.
An audio thread of chat bubbles, each with a play control, waveform, and duration, plus an active note with elapsed time and a transcript preview.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Voice Message Thread is a conversation carried by audio notes in one block, a header showing Maya Chen with a recording status line, and four voice bubbles alternating incoming and outgoing. Each bubble pairs a play control, a static waveform split into played and remaining bars, and a duration. The active note from Maya Chen shows a pause control, elapsed time against total, and a 1.5x playback speed chip, and one incoming note carries an auto transcript preview beneath its waveform. A footer hint explains the hold to record gesture and automatic transcription.
Notes are one typed array, and the waveform played split is driven by a playedBars count per note. Outgoing bubbles invert the waveform and text colors so direction reads at a glance.
Reach for this block when a chat thread carries voice notes rather than text, wired to your audio store with the play and pause controls bound to a real player and the waveform progress reflecting playback position. Use the standalone message thread when the conversation is text first.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the voice notes DM thread. Other audio message shapes:
Tip: always ship the transcript preview on at least one note; it signals that audio here is searchable, not a dead end for anyone who cannot listen.