Playable voicemail with a synced transcript

An in-brand audio player whose transcript highlights as it plays and jumps the audio when you click a word.

What it is

A custom player used everywhere audio appears. The transcript belongs to the player rather than sitting above it: collapsible, dimming words already spoken, and clickable to seek. Scrubbing the bar moves the highlight too.

Also called: play voicemail · voicemail transcript · listen to the recording · attachment 1

See it
Playable voicemail with a synced transcript
🔒ridgelinepostframe.com/project/brande156
Riding Arena
Framing · on schedule
The player with a scrub bar and the transcript expanded, spoken words dimmed and the current word bright. AudioPlayer.tsx. Sample data — no customer information appears here.
How it works
  1. 1Word positions are estimated by distributing words across the clip in proportion to character length
  2. 2Clicking a word seeks the audio; scrubbing moves the highlight — two views of one position
  3. 3onFirstPlay marks the clip listened, which clears its 'new' dot
  4. 4Deliberately not a native <audio controls>, which renders differently on every platform
Why we built it

A voicemail arrived as an attachment link and rendered as "Attachment 1" on the contact and a broken image on the pipeline card — so the most valuable inbound message a post-frame builder can receive, a lead worth $30,000 to $250,000 leaving their number, could not be played in the product that captured it. Voicemails now play in an in-brand player whose transcript highlights as it runs, and clicking a word jumps the audio to it. The word timings are a navigation aid rather than a claim about exactly when each word was spoken.

The problem
  • Unplayable voicemail in the product that captured it
  • Transcripts crowding out the audio they describe
Sound familiar?
What you get
Skim a voicemail by reading and jump straight to the part that matters
Consistent controls on every platform

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →