Interactive Transcript

Put the transcript next to the player so clicking any line jumps playback to that moment.

moderate User Experience

What it adds

A time-aligned transcript panel beside the audio or video player, with click-to-seek, a moving highlight, and in-transcript search.

What your agent is told to do

1
Render the transcript from the timestamps the app already stores. If Voice Transcription exists, extend its output and its data model rather than producing a second transcript with its own timings.
2
Make every line a real seek target: clicking or pressing enter on a line moves playback to that time and keeps focus where the user left it.
3
Highlight the line currently being spoken and keep it in view as playback advances, using the player's own time updates rather than a separate timer.
4
Add a search box over the transcript that lists matches and jumps playback to any of them. Reuse the app's existing search match highlighting so results look the same as everywhere else.
5
Do not render thousands of lines into the page at once. Virtualise the list, and make sure seeking to a far-off match still works when the target line has not been rendered yet.

Edge cases it handles

Auto-scrolling the active line into view fights a user who is scrolling by hand. Suspend follow mode as soon as they scroll away, and offer a visible control to jump back to the current position.
A transcript of several thousand lines will stall the page if every line is mounted and every line re-renders on each time update. Virtualise, and update only the lines whose highlight state actually changed.
In-transcript search must show how many matches there are and let the user step between them, jumping playback to each. A search that only dims non-matching text is not enough on a long recording.
Changing playback speed must not drift the highlight. Derive the active line from the player's reported current time, never from an interval that assumes real-time playback.
On a narrow screen the side-by-side layout has to stack, with the player pinned so it stays visible while the user scrolls the transcript. A transcript that scrolls the player off the top is unusable.
Lines with missing or overlapping timestamps must still render as text and simply not be clickable, rather than seeking to zero.
Seeking must survive the media not being loaded yet: queue the seek and apply it once the player is ready.
The transcript must remain selectable and copyable as plain continuous text, including across the boundaries of virtualised lines.

Definition of done

Clicking or keyboard-activating any line seeks playback to that moment.
The active line is highlighted and follows playback, and manual scrolling suspends follow until the user returns.
A transcript of several thousand lines scrolls and highlights without visible lag.
In-transcript search reports match counts and jumps playback to each match.
The highlight stays correct at every supported playback rate.
The layout stacks on narrow screens with the player still visible.
Transcript text can be selected and copied as continuous prose.
The feature matches the existing design system.
No existing functionality is broken.

Related features

Feedback Widget

Booking Page

Audio Chapter Markers

How it works

1

Copy the link

Grab the Markdown instruction URL for this feature.
2

Give it to your AI

Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
3

It inspects, then implements

Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.