Skip to main content

Navigate by Timestamps

Timestamps are one of the most powerful features in Scriptix transcripts. They link every word to its exact position in the audio, enabling instant navigation and time-based editing. This guide covers everything you need to know about working with timestamps.

What Are Timestamps?​

Timestamps indicate the exact time position in your audio or video file where each word, sentence, or utterance occurs.

Timestamp Format​

Scriptix displays timestamps in the standard time format:

[HH:MM:SS]
  • HH - Hours (00-99)
  • MM - Minutes (00-59)
  • SS - Seconds (00-59)

Examples:

  • [00:00:15] - 15 seconds into the audio
  • [00:02:30] - 2 minutes and 30 seconds
  • [01:15:45] - 1 hour, 15 minutes, 45 seconds

Note: Internally, timestamps are stored with millisecond precision, but only seconds are displayed in the interface for readability.

Types of Timestamps​

Scriptix generates two levels of timestamps:

1. Word-Level Timestamps

  • Every individual word has start and stop times (in milliseconds)
  • Not visible in the interface, but stored in data-start and data-stop attributes
  • Enables clicking any word to jump to that point
  • Used for real-time word highlighting during playback

2. Utterance-Level Timestamps

  • Displayed at the start of each speaker turn
  • Shows when that speaker begins talking
  • Format: [00:01:23] displayed before the speaker label
  • Formatted using Luxon Duration library: Duration.fromMillis(start).toFormat('hh:mm:ss')

Timestamp Display​

Where Timestamps Appear​

In the transcript editor:

[00:00:05] Speaker 1
This is the first utterance with a timestamp. Every word
here knows its exact position in the audio.

[00:00:45] Speaker 2
This is the second utterance. Notice the timestamp shows
when this speaker starts talking.

Visual Characteristics:

  • Timestamps appear before the speaker label
  • Positioned at the beginning of each utterance
  • Always visible in the editor for navigation
  • Non-editable (cannot be manually changed in the UI)

Timestamp in Media Player​

The media player footer displays:

  • Current time / Total duration
  • Format: MM:SS or HH:MM:SS (depending on length)
  • Uses formatTimeClean() utility which intelligently omits unnecessary leading zeros:
    • Files under 1 minute: Shows SS (e.g., "45")
    • Files under 1 hour: Shows MM:SS (e.g., "12:45")
    • Files over 1 hour: Shows HH:MM:SS (e.g., "01:12:45")

Timestamps enable several powerful navigation features:

Click-to-Seek on Words​

The most intuitive way to navigate:

How It Works:

  1. Click on any word in the transcript
  2. The onMouseUp event triggers word selection
  3. Audio/video automatically seeks to that word's start timestamp
  4. A popover appears near the clicked word for additional actions
  5. Playback position updates immediately

Implementation Details:

  • Each word element has data-start and data-stop attributes (in milliseconds)
  • Clicking extracts the selected word using getSelectedWordFromSelection()
  • Audio seeks using: setTime(selectedWordElement.start / 1000) (converts ms to seconds)
  • Works whether media is playing or paused

Use Cases:

  • Review specific sections
  • Verify what was actually said
  • Check context around unclear words
  • Navigate to areas needing correction

Tips:

  • Click the exact word you want to hear
  • Player starts at that word's beginning
  • Audio continues playing from that point if already playing

Click-to-Seek on Timestamps​

Click directly on the timestamp label itself:

How It Works:

  1. Click the timestamp at the start of an utterance (e.g., [00:00:05])
  2. Audio jumps to the beginning of that utterance
  3. Playback starts from the speaker's first word

Use Cases:

  • Jump to the start of a speaker's turn
  • Navigate between different speakers quickly
  • Quick section-by-section review

Real-Time Word Highlighting​

When audio is playing, the editor highlights words as they're spoken with color-coding:

Color System:

  • Blue (#0a8df8) - Currently playing word (precise sync with audio)
  • Black (#000000) - Already played words (past)
  • Gray (#707070) - Future words (not yet spoken)
  • Default - Words without timing data

Additional Highlighting:

  • Yellow background (#faf600) - Marked/flagged words (user-created marks)
  • Beige (#ffeeba) - Search matches
  • Gray background (#dbdde3) - Words within comment range
  • Border - Current search match (when navigating search results)

Features:

  • Active word highlighting - Current word shown with blue color
  • Auto-scrolling - Transcript scrolls to keep current word visible
  • Out-of-view button - Appears when current word scrolls out of view

Implementation:

  • Uses currentWordIsSeeking() utility to determine if word is currently playing
  • Compares word's start/stop times (in ms) with current playback time (converted to ms)
  • Updates dynamically as audio plays

Jump to Current Word Button​

When the currently playing word scrolls out of view, a floating button appears:

Features:

  1. Appears at bottom center of screen (54px above footer)
  2. Shows when current word is above or below viewport
  3. Animated entrance/exit (Framer Motion)
  4. Text: "Jump to current word..."

How It Works:

  1. IntersectionObserver monitors current word visibility
  2. When word goes out of view, button slides up from bottom
  3. Click the button to:
    • Find current paragraph using getCurrentParagraphSeeking()
    • Scroll to that paragraph using scrollToIndex() with smooth animation
    • Center the paragraph in viewport
    • Dismiss the button

Use Cases:

  • Scroll freely while audio plays
  • Quickly return to current playback position
  • Re-enable auto-scroll after manual navigation

Timecode Input Dialog​

Navigate to a specific time or set a timecode offset:

How to Access:

  1. Click the "Timecode" button in the media player footer
  2. A modal dialog appears with four input fields

Input Fields:

  • Hours (H) - 0-99
  • Minutes (M) - 0-59
  • Seconds (S) - 0-59
  • Milliseconds (Ms) - 0-999

How to Use:

  1. Enter the desired time values in each field
  2. Click "Save" or press Enter
  3. Audio jumps to that exact time
  4. Transcript scrolls to the corresponding section
  5. The timecode offset is saved to the document

What is Timecode Offset:

  • Starting time position for the transcript
  • Useful when transcript doesn't start at 00:00:00
  • Aligns transcript with audio that has pre-roll or different starting point
  • Stored in document as timecode_offset (in seconds)
  • All navigation respects this offset

Examples:

  • Enter 0 H, 2 M, 30 S, 0 Ms to jump to 2 minutes, 30 seconds
  • Enter 1 H, 15 M, 45 S, 500 Ms to jump to 1 hour, 15 minutes, 45.5 seconds

Working with Timestamps While Editing​

Timestamps During Playback​

While listening to your audio:

Synchronized Highlighting:

  1. Press Play to start audio
  2. Watch the transcript as words change color in real-time
  3. Current word highlighted in blue
  4. Transcript auto-scrolls to follow along
  5. Past words turn black, future words remain gray

Following Along:

  • Read while listening to verify accuracy
  • Spot errors as they occur in real-time
  • Note sections needing correction
  • Understand context and tone

Timestamps for Error Correction​

Use timestamps to efficiently correct transcription errors:

Workflow:

  1. Skim the transcript - Read through quickly
  2. Note unclear sections - Mark areas that seem wrong
  3. Click the word - Jump to that timestamp
  4. Listen - Hear what was actually said
  5. Correct - Fix the error while context is fresh

Example:

  • Transcript says: "The company's revenue increased"
  • You suspect it should be different
  • Click on "revenue" to jump to that point
  • Listen and confirm it's actually "avenue"
  • Correct to "The company's avenue increased"

Verifying Edits​

After making changes, verify they're correct:

  1. Make your edit
  2. Click the edited word
  3. Listen to the audio at that point
  4. Confirm your edit matches what was spoken

Timestamp-Based Features​

Several editor features rely on timestamps:

Audio Waveform​

The waveform visualization (powered by Peaks.js) shows:

  • Visual representation of audio amplitude
  • Playback position indicator
  • Clickable timeline for navigation

Using the Waveform:

  1. Click anywhere on the waveform
  2. Audio jumps to that position
  3. Transcript scrolls to corresponding text
  4. Both ReactPlayer and Peaks.js stay synchronized

Visual Cues:

  • Tall peaks - Loud sections (active speech)
  • Short peaks - Quiet sections (silence or pauses)
  • Playhead - Vertical line showing current position

Implementation:

  • Peaks.js instance managed in AudioContext
  • Synchronized seeking across both player and waveform
  • Time is clamped to minimum of timecode offset

Media Slider​

Interactive progress bar below the player:

Features:

  • Range input with visual progress gradient
  • Shows current position and total duration
  • Drag to seek to any position
  • Updates in real-time during playback

How It Works:

  • Gradient fills from left based on playback percentage
  • Clicking or dragging updates audio position
  • Syncs with both ReactPlayer and waveform

Search with Timestamps​

When using search and replace:

  • Found matches are highlighted in the transcript
  • Click a match to jump to that word's timestamp
  • Navigate between matches to hear each occurrence
  • Understand context where each match occurs

Comments with Timestamps​

Comments are linked to specific text ranges:

  • Each comment knows its start and end timestamps
  • Words within comment range shown with gray background
  • Click a comment to scroll to that section
  • Review feedback in audio context

Keyboard Shortcuts for Navigation​

Scriptix provides extensive keyboard shortcuts for playback control:

Playback Control​

ActionKeyboard Shortcuts
Play/PauseF8, F11, F5, F4, F10, Media Play/Pause, Ctrl+P, Cmd+P, Cmd+Space
Rewind 5 secondsLeft Arrow, Ctrl+Left, Cmd+Left
Forward 5 secondsRight Arrow, Ctrl+Right, Cmd+Right

Notes:

  • Multiple F-key shortcuts support various keyboard layouts (Dell, HP, ThinkPad, standard)
  • Multimedia keys (Media Play/Pause) work on keyboards with dedicated media controls
  • Mac shortcuts use Cmd (meta) key instead of Ctrl

Playback Speed​

ActionKeyboard Shortcuts
Speed up (+0.5x)Ctrl+Plus, Ctrl+=, Cmd+Plus, Cmd+=
Slow down (-0.5x)Ctrl+Minus, Cmd+Minus

Speed Range:

  • Minimum: 0.5x (half speed)
  • Maximum: No hard limit, increases by 0.5x increments
  • Default: 1.0x (normal speed)

Other Shortcuts​

ActionKeyboard Shortcuts
Focus searchCtrl+F, Cmd+F

See Also: Full keyboard shortcuts documentation for text editing shortcuts.

Timestamp Accuracy​

Understanding timestamp precision helps set expectations:

Word-Level Precision​

Accuracy:

  • Stored with millisecond precision
  • Typically accurate to within ±100-200 milliseconds
  • Most words are precisely timed
  • Short words may have less precise boundaries

Factors Affecting Accuracy:

  • Clear, well-enunciated speech → Better timing
  • Fast or mumbled speech → Less precise
  • Overlapping speakers → Timing challenges
  • Background noise → Reduced precision

Utterance-Level Precision​

Accuracy:

  • Very accurate for when speakers start talking
  • Clearly marks speaker transitions
  • Useful for navigation even if word-level timing is imperfect

Practical Impact​

For most use cases, timestamp precision is excellent:

  • Navigation - Click-to-seek works precisely
  • Editing - Easy to verify what was said
  • Export - Timestamps accurate enough for subtitles/captions
  • Synchronization - Reliable for most purposes

Timestamp Preservation​

Timestamps are preserved throughout your workflow:

During Editing​

  • Text changes - Timestamps unaffected by text edits
  • Deletions - Removing text keeps surrounding timestamps intact
  • Additions - New text added without timestamps (no timing data)
  • Speaker changes - Moving utterances preserves their timing
  • Split utterances - New utterances inherit approximate timestamps based on position

During Auto-Save​

  • Transcript auto-saves every 120 seconds
  • Preserves all timing data during saves
  • LocalStorage backup includes full timestamp information
  • No data loss during editing sessions

During Export​

Timestamps can be included or excluded based on export format:

Format Examples:

Word Document (DOCX):

[00:00:05] Speaker 1: This is the utterance text.

Plain Text (TXT):

[00:00:05] Speaker 1
This is the utterance text.

Subtitle Formats (SRT, VTT):

1
00:00:05,000 --> 00:00:08,500
This is the utterance text.

Advanced Navigation Techniques​

Section-by-Section Review​

Systematic review using timestamps:

Workflow:

  1. Start at the beginning [00:00:00]
  2. Read the first utterance
  3. Click the timestamp to listen
  4. Make corrections if needed
  5. Click the next utterance's timestamp
  6. Repeat through the entire document

Benefits:

  • Thorough review of entire transcript
  • Catches all errors, not just obvious ones
  • Builds familiarity with content

Targeted Review​

Focus on specific sections:

Use Cases:

  • Review only sections with technical terms
  • Check areas with poor audio quality
  • Verify proper names and acronyms
  • Confirm critical information

Workflow:

  1. Skim transcript to identify target sections
  2. Note the timestamps
  3. Click directly on each timestamp or word
  4. Review and correct
  5. Skip sections that look accurate

Following Along While Reading​

Technique:

  1. Start playback at normal or slow speed
  2. Read along as words highlight
  3. Let auto-scroll keep pace
  4. Click words immediately when errors appear
  5. Pause, correct, and continue

Benefits:

  • Catch errors in real-time
  • Understand tone and emphasis
  • Verify punctuation and capitalization

Timestamp Troubleshooting​

Click-to-Seek Not Working​

Issue: Clicking words doesn't jump to audio position

Possible Causes:

  • Audio player not loaded
  • Media file missing or unavailable
  • Browser/connection issue
  • Ad blocker or extension interference

Solution:

  1. Check that audio player is visible and loaded
  2. Verify media file is accessible (try playing normally)
  3. Refresh the page
  4. Try a different browser
  5. Disable browser extensions temporarily

Auto-Scroll Not Following​

Issue: Current word highlighting works, but transcript doesn't auto-scroll

Possible Causes:

  • You've manually scrolled elsewhere (auto-scroll disabled)
  • Performance issue with large documents

Solution:

  • Click the "Jump to current word" button to re-enable auto-scroll
  • Avoid scrolling manually during playback if you want continuous auto-scroll
  • Button will reappear if you scroll away again

Word Colors Not Updating​

Issue: Words stay the same color during playback

Possible Causes:

  • Audio not actually playing
  • Timing data missing for those words
  • Performance/rendering issue

Solution:

  1. Check that audio is playing (not paused)
  2. Refresh the page
  3. Check browser console for errors
  4. Contact support if issue persists

Timestamps Show [00:00:00] for All Utterances​

Issue: All timestamps display zero

Possible Causes:

  • Processing error during transcription
  • Audio file timing issues
  • Corrupted transcript data

Solution:

  • Timestamps cannot be manually edited
  • If timestamps are systematically wrong, contact support
  • May require re-transcription

Timecode Offset Not Saving​

Issue: Timecode offset resets after closing editor

Possible Causes:

  • Save operation failed
  • Network issue during update
  • Permission issue

Solution:

  1. Check toast notifications for error messages
  2. Try setting the offset again
  3. Verify you have edit permissions
  4. Check network connection
  5. Contact support if issue persists

Best Practices​

For Efficient Editing​

  1. Listen Before Editing - Use click-to-seek to verify before making changes
  2. Follow Along During Playback - Catch errors in real-time
  3. Use Timestamps for Context - Understand what was actually said
  4. Jump to Unclear Sections - Don't guess, listen and confirm
  5. Use Keyboard Shortcuts - Speed up navigation with arrow keys

For Quality Assurance​

  1. Section-by-Section Review - Use timestamps to systematically check everything
  2. Verify Critical Information - Always listen to timestamps for important details
  3. Double-Check Proper Names - Click and verify all names and technical terms
  4. Review Questionable Sections - If something seems odd, use timestamp to check
  5. Check Speaker Boundaries - Verify timestamps align with actual speaker changes

For Collaboration​

  1. Reference Timestamps in Comments - "Check the word at [00:05:23]"
  2. Note Time Ranges for Issues - "Poor audio quality from [00:10:00] to [00:12:30]"
  3. Use Timestamps in Feedback - Helps reviewers find specific sections quickly
  4. Share Specific Moments - Direct collaborators to exact positions

Frequently Asked Questions​

Can I manually edit timestamps?​

No, timestamps are automatically generated during transcription and cannot be manually changed through the UI. They reflect the actual timing in the audio file. However, you can set a timecode offset to shift all timestamps.

Why don't I see timestamps for every word?​

Word-level timestamps exist internally (stored in data-start and data-stop attributes) but aren't displayed to avoid clutter. You see utterance-level timestamps, but clicking any word uses its internal timestamp.

Do timestamps work if I edit the text?​

Yes! Editing text doesn't affect timestamps. The timestamps reflect positions in the audio, not the text itself. If you change "hello" to "hi", the timestamp for that word remains the same.

Can I remove timestamps from the editor view?​

No, timestamps are always visible in the editor for navigation purposes. However, you can exclude them from exports depending on the export format.

What happens to timestamps if I delete an utterance?​

The utterance and its timestamp are removed from the document, but the audio timing remains unchanged. Other timestamps are unaffected.

What happens to timestamps if I split an utterance?​

The original utterance keeps its timestamp. The new utterance created by the split inherits an approximate timestamp based on where it was split.

Do timestamps account for video vs audio files?​

Yes, timestamps work identically for both audio and video files. They represent the time position in the media regardless of type.

What's the difference between current time and timecode offset?​

  • Current time - The playback position in the audio (e.g., 2 minutes in)
  • Timecode offset - A starting offset applied to the whole transcript (e.g., transcript starts at 5 minutes into the audio)

Can I use timestamps for subtitle generation?​

Yes! Export formats like SRT and VTT use the timestamp data to generate properly timed subtitles/captions with millisecond precision.

Why are timestamps stored in milliseconds but displayed in seconds?​

Milliseconds provide precision for accurate word-level synchronization. Seconds are displayed for readability. The conversion happens automatically.

Next Steps​

Master related features:

Start navigating! Click any word in your transcript to jump to that point in the audio.