Skip to main content

Audio/Video Playback

The integrated media player in Scriptix allows you to listen to your audio or watch your video while reviewing and editing the transcript. This guide covers all playback controls and features.

Media Player Overview

The Scriptix transcript editor has two distinct player components:

  1. Floating Draggable Player - Video/audio preview window (left side)
  2. Fixed Player Controls Bar - Playback controls (bottom of screen)

Floating Draggable Player

Located on the left side of the screen when media is available:

┌─────────────────────────┐
│ Draggable Video/Audio │
│ Preview Window │
│ │
│ [Video Display Area] │
│ (or audio thumbnail) │
│ │
│ 300px × 170px │
│ │
└─────────────────────────┘

Elements:

  • Video display area - Shows video preview for video files
  • Audio thumbnail - Shows audio icon/image for audio-only files
  • Black rounded background - Visual container
  • Draggable - Click and drag anywhere on the player to reposition

Repositioning:

  1. Click and hold anywhere on the player window
  2. Drag to any position on the screen
  3. Release to drop in new location
  4. Player stays where you place it for the session

Player Specifications:

  • Size: 300px wide × 170px tall
  • Media component: ReactPlayer (lazy loaded)
  • Progress updates: Every 300ms
  • Fallback: Volume icon if media fails to load

Benefits:

  • Position player where it doesn't obstruct transcript text
  • Move out of the way while editing specific sections
  • Bring close when you need to see video context
  • Optimize placement for your workflow and screen size

Fixed Player Controls Bar

Located at the bottom of the screen in a fixed position:

┌────────────────────────────────────────────────────────────┐
│ ⏮ ▶ ⏭ ⏰ [1.0x ▼] 00:01:23 ──────●───────────────── │
└────────────────────────────────────────────────────────────┘

Control Elements (left to right):

  1. Rewind button (Undo2 icon) - Jump back 5 seconds
  2. Play/Pause toggle - Start/stop playback
  3. Forward button (Redo2 icon) - Jump forward 5 seconds
  4. Timecode button (Clock icon) - Open timecode offset dialog
  5. Speed selector dropdown - Change playback speed
  6. Current time display - Shows current playback time with animation
  7. Progress slider - Full-width seekable timeline (remaining space)

Visibility:

  • Only appears when session has media
  • Takes up bottom ~48px of screen height
  • Fixed position, always visible while scrolling

Playback Controls

Play/Pause

Button: Play/Pause toggle (Play or Pause icon)

Location: Fixed player controls bar (bottom)

Keyboard Shortcut: Space

Behavior:

  • Shows Play icon when paused
  • Shows Pause icon when playing
  • Click to toggle between play and pause states
  • Playback continues from current position
  • Transcript highlights current word while playing
  • Updates every 300ms (debounced for performance)

Tips:

  • Use Space for quick play/pause without clicking
  • Current word in transcript highlights in real-time during playback
  • Auto-scrolling keeps active word visible

Rewind 5 Seconds

Button: Rewind button (Undo2 icon - curved arrow left)

Location: Fixed player controls bar (bottom)

Keyboard Shortcut: Ctrl + ArrowLeft (Windows) or Cmd + ArrowLeft (Mac)

Behavior:

  • Jumps back exactly 5 seconds from current position
  • Uses rewind(seconds?: number) function (default: 5 seconds)
  • New time calculated as: Math.max(currentTime - 5, 0)
  • Cannot go before 0 seconds (start of media)
  • Updates both player and waveform position
  • Transcript scrolls to corresponding position

Use Cases:

  • Mishear a word? Rewind and listen again
  • Verify what was actually said
  • Re-listen to context around an error
  • Check pronunciation or unclear speech

Forward 5 Seconds

Button: Forward button (Redo2 icon - curved arrow right)

Location: Fixed player controls bar (bottom)

Keyboard Shortcut: Ctrl + ArrowRight (Windows) or Cmd + ArrowRight (Mac)

Behavior:

  • Jumps forward exactly 5 seconds from current position
  • Uses forward(seconds?: number) function (default: 5 seconds)
  • New time calculated as: Math.min(currentTime + 5, duration)
  • Cannot go beyond total duration
  • Updates both player and waveform position
  • Transcript scrolls to corresponding position

Use Cases:

  • Skip past long pauses or silence
  • Move quickly through sections that don't need editing
  • Navigate to next section of interest
  • Fast-forward through accurate sections

Playback Speed

Control: Speed dropdown selector (SelectInput component)

Location: Fixed player controls bar (bottom)

Default: 1.0x (normal speed)

Keyboard Shortcuts:

  • Increase speed: Ctrl + + (Windows) or Cmd + + (Mac)
  • Decrease speed: Ctrl + - (Windows) or Cmd + - (Mac)

Available Speeds:

  • 0.5x - Half speed (very slow)
  • 0.75x - Three-quarters speed (slow)
  • 1.0x - Normal speed (default)
  • 1.25x - Slightly faster
  • 1.5x - Fast review
  • 1.75x - Very fast review
  • 2.0x - Double speed (maximum)

Note: The player supports 1.75x speed (not mentioned in many speed selectors), giving you an additional option between 1.5x and 2.0x.

When to Use Different Speeds:

0.5x - 0.75x (Slow):

  • Heavy accents or unclear speech
  • Technical terminology that's hard to catch
  • Fast speakers or rapid dialogue
  • Learning a new language from transcripts
  • Transcribing difficult sections with background noise

1.0x (Normal):

  • Standard review and editing
  • Comfortable listening pace
  • Matching original tone and context
  • When timing and cadence matter

1.25x - 1.5x (Fast):

  • Quick review of sections that look accurate
  • Scanning through familiar content
  • Time-efficient first pass
  • Verifying corrections you've made
  • Balanced speed/comprehension

1.75x - 2.0x (Very Fast):

  • Skimming very long transcripts
  • Checking overall flow and structure
  • Finding specific sections quickly
  • Only when already familiar with content
  • Final quality check pass

Tip: Audio quality and pitch are preserved at all speeds - speech remains clear and understandable even at 2.0x.

Progress Slider

Visual Timeline

Component: Range input with gradient background

Location: Fixed player controls bar (bottom, taking up remaining horizontal space)

Appearance:

  • Horizontal slider bar
  • Blue gradient fills from left (progress completed)
  • Gray fills from right (progress remaining)
  • Circular handle (●) shows current position
  • Full-width design (flex-1 with margin)

Slider Shows:

  • Total duration - Full length of the media (max value)
  • Current position - Visual indicator showing playback location
  • Progress percentage - Filled portion of slider
  • Seekable - Click or drag to any position

Seeking with the Slider

Click to Jump:

  1. Click anywhere on the slider track
  2. Playback jumps to that position immediately
  3. Transcript scrolls to corresponding text
  4. Waveform updates to show new position

Drag to Scan:

  1. Click and hold the slider handle
  2. Drag left (earlier) or right (later)
  3. Release at desired position
  4. Playback updates to new position
  5. All components (transcript, waveform) sync

Precision:

  • Slider reflects the full duration accurately
  • Easy to jump to approximate positions quickly
  • For exact positioning, use timecode input (see below)
  • Visual feedback shows gradient progress

Time Display

Time Format

Display: Current time only (animated)

Location: Fixed player controls bar (bottom, between speed selector and progress slider)

Example: 00:01:23 (HH:MM:SS:SSS format)

Format Details:

  • Uses Luxon Duration formatting
  • Format: hh:mm:ss:SSS (hours:minutes:seconds:milliseconds)
  • Function: formatTime(timeInSeconds)
  • Animated appearance using Framer Motion
  • Motion animation settings:
    • Opacity: 0 → 1 (duration 0.5s)
    • Scale: 0.8 → 1.0 (spring animation, stiffness 300, damping 25)
    • Position: slides from x: 10, y: 0

Visual Styling:

  • Small text size (text-sm)
  • Gray color (text-gray-500)
  • Centered in its container
  • Smooth animated entrance

Note: Unlike many players, this shows only current time, not "current / total" format. Total duration is represented visually by the progress slider.

Timecode Button & Offset Dialog

Button: Timecode button (Clock icon, 16px width)

Location: Fixed player controls bar (bottom)

Label: "Timecode"

Opens: Timecode offset modal

Purpose: Set timecode offset for the entire document (not for seeking to a specific time)

How It Works:

Opening the Dialog:

  1. Click the "Timecode" button in the player controls
  2. Modal opens: "Set Timecode"

Dialog Layout: Four input fields in a grid:

  • Hours (H) - Numeric input
  • Minutes (M) - Numeric input
  • Seconds (S) - Numeric input
  • Milliseconds (Ms) - Numeric input

Setting Timecode Offset:

  1. Enter desired offset values in each field
  2. Values must be valid numbers
  3. Click "Save" button
  4. Total offset calculated: (hours × 3600) + (minutes × 60) + seconds + (milliseconds ÷ 1000)
  5. Offset applied to document (timecode_offset field)
  6. Player seeks to new position
  7. Toast notification confirms update

Use Cases:

  • Match transcript timestamps to original media timecodes
  • Adjust for recording start delays
  • Sync with external timecode systems
  • Correct timestamp offsets from processing

Important: This sets a document-wide offset, not a seek position. It adjusts all timestamps in the transcript relative to the media file.

Video Playback

For video files, additional features are available:

Video Preview

Display Area:

  • Video preview appears in the floating draggable player window
  • Size: 300px × 170px
  • Shows current frame of the video in real-time
  • Updates continuously during playback
  • ReactPlayer component handles rendering

Player Configuration:

  • Controls: false (controls are in fixed bar, not on player)
  • Volume: 1 (100%)
  • Muted: Controlled by isMuted state
  • AutoPlay: false
  • Progress interval: 300ms
  • Width: 300px
  • Height: 170px
  • Rounded corners (rounded-lg class)
  • Black background

Video Quality:

  • Streamed from media URL
  • Quality depends on source file and network
  • Optimized for smooth playback
  • May adjust based on connection speed

Audio-Only Files

Display:

  • No video preview area
  • Shows audio thumbnail image instead
  • Image: audioThumbnail from assets
  • Centered in player window
  • Size: 60px width
  • Positioned absolutely over player area
  • Pointer-events: none (doesn't interfere with dragging)

Fallback:

  • If media fails to load: Volume icon (size 35px)
  • Centered in player area
  • Provides visual feedback that player is active

Video vs Audio-Only

Video Files:

  • Visual preview in floating player
  • Standard playback controls in bottom bar
  • All controls function identically

Audio Files:

  • Static audio thumbnail image in floating player
  • Standard playback controls in bottom bar
  • All controls function identically
  • No difference in control behavior

Tip: The transcript editor focuses on audio content for both file types. Video preview is supplementary for visual context (e.g., speaker identification, gestures, presentations).

Synchronized Playback

Word-Level Highlighting

During Playback:

  • Current word is visually highlighted in the transcript
  • Highlighting updates in real-time as audio plays (300ms intervals)
  • Synchronized with audio position through word timestamps
  • Helps you follow along and immediately spot errors

Visual Highlighting:

  • Active word has distinct styling
  • Easily visible while reading along
  • Synchronized precisely with audio position
  • Uses word-level timestamp data

Performance:

  • Debounced progress updates (300ms) for smooth performance
  • Virtual scrolling handles large documents efficiently
  • No lag even with thousands of utterances

Auto-Scrolling

Automatic Scrolling:

  • Transcript automatically scrolls to keep current word visible
  • Uses Virtuoso virtual scrolling component
  • Smooth, continuous scrolling during playback
  • Centers on current paragraph automatically

Manual Override:

  • Scroll manually to a different section
  • Auto-scroll system detects you've moved away
  • "Jump to current word" button appears at top
  • Auto-scroll pauses until you click the jump button

Jump Button Behavior:

  • Shows when current word is out of viewport
  • Button text: "Jump to current word" or similar
  • Click to scroll back to active playback position
  • Uses scrollToIndex with center alignment and smooth behavior
  • Auto-scroll resumes after jumping

Implementation:

  • onWordOutOfView(ref, direction) triggers jump button
  • onWordInView() hides jump button
  • jumpToCurrentWord() scrolls to current paragraph
  • Uses getCurrentParagraphSeeking() to find active utterance

Click-to-Seek in Transcript

Text Navigation Integration:

  • Click any word in the transcript body
  • Player jumps to that word's timestamp
  • Playback starts from that exact position (if playing)
  • Or sets position ready for play (if paused)

How It Works:

  1. Each word has timestamp data (start/stop times)
  2. Click handler extracts word's timestamp
  3. Calls setTime(timestamp) to update player position
  4. Player seeks to that position
  5. Waveform and controls update accordingly
  6. If playing, audio continues from new position

Use Cases:

  • Spot an error while reading
  • Click the word to jump to that audio
  • Listen to what was actually said
  • Make correction based on what you hear
  • Continue editing

See Navigate by Timestamps for more details.

Playback Workflow Strategies

Full Listen-Through

Method: Listen to entire transcript while reading along

Steps:

  1. Start playback from the beginning
  2. Read along as audio plays
  3. Use playback speed for comfort (1.0x or 1.25x recommended)
  4. Pause (Space) when you find errors
  5. Make corrections while paused
  6. Resume playback (Space) and continue

Best For:

  • First review of new transcripts
  • Understanding overall context and tone
  • Catching flow and speaker attribution errors
  • Short to medium-length files (under 30 minutes)
  • When accuracy is critical

Tips:

  • Use 1.25x speed to save time while maintaining comprehension
  • Don't try to edit while audio plays - pause first
  • Let auto-scroll keep you on track
  • Use rewind button liberally when uncertain

Targeted Verification

Method: Jump to specific sections to verify

Steps:

  1. Skim transcript to identify questionable sections
  2. Click words to jump to their audio position
  3. Listen to verify correct transcription
  4. Make corrections as needed
  5. Move to next questionable section (don't listen to everything)

Best For:

  • Quick review of mostly accurate transcripts
  • Verifying proper names, technical terms, numbers
  • Checking flagged or low-confidence sections
  • Time-efficient editing
  • Second-pass review after initial corrections

Tips:

  • Add comments to sections needing verification, then address them systematically
  • Use search to find all instances of uncertain terms
  • Click timestamps to jump quickly
  • 1.5x speed for quick verification

Slow Review for Difficult Audio

Method: Systematic slow-speed review with frequent pauses

Steps:

  1. Set playback speed to 0.75x or 0.5x
  2. Play short sections (a few seconds at a time)
  3. Pause frequently to make corrections
  4. Use rewind button liberally (every unclear word)
  5. Verify each sentence is perfect before moving on
  6. Take breaks to avoid listening fatigue

Best For:

  • Heavy accents or unclear speech
  • Technical content with specialized terminology
  • Noisy audio or poor recording quality
  • Multiple overlapping speakers
  • Learning transcription skills
  • Critical accuracy requirements (legal, medical)

Tips:

  • 0.75x is often sufficient - only use 0.5x for very difficult audio
  • Rewind is your best friend - use it constantly
  • Focus on small sections at a time (30 seconds)
  • Mark sections you can't decipher for review by others

Fast Skim

Method: Quick high-speed review for quality check

Steps:

  1. Set playback speed to 1.5x, 1.75x, or 2.0x
  2. Listen while reading quickly
  3. Only pause for obvious errors or missing text
  4. Flag sections for detailed review later (use comments)
  5. Complete full pass quickly for overall quality sense

Best For:

  • Second pass after initial editing
  • Very long transcripts (1+ hours)
  • Familiar content or repeated material
  • Time-constrained situations
  • Final quality check before submission
  • Verifying corrections you made

Tips:

  • 2.0x sounds fast but you can understand speech
  • Don't try to catch every small error - focus on major issues
  • Use comments to flag issues for detailed review
  • Best for content you've already reviewed once

Method: Combine strategies based on content quality

Steps:

  1. First pass at 1.5x: Skim entire transcript, identify problem areas
  2. Add comments: Mark all uncertain sections
  3. Targeted slow review: Set to 0.75x, address commented sections
  4. Click-to-seek: Jump to specific words for verification
  5. Final fast check: 1.75x speed, verify all corrections
  6. Delete resolved comments as you fix issues

Best For:

  • Most transcripts (typical accuracy: 80-95%)
  • Efficient use of time
  • Balanced thoroughness and speed
  • Real-world professional workflow

Keyboard Shortcut Summary

Master these shortcuts for efficient playback control:

ActionWindows/LinuxMac
Play/PauseSpaceSpace
Rewind 5 secCtrl + ArrowLeftCmd + ArrowLeft
Forward 5 secCtrl + ArrowRightCmd + ArrowRight
Speed upCtrl + +Cmd + +
Slow downCtrl + -Cmd + -

Additional Keyboard Shortcuts:

  • Ctrl + Z / Cmd + Z - Undo
  • Ctrl + Y / Cmd + Y - Redo
  • Ctrl + F / Cmd + F - Open search panel

Tip: Keep your hands on the keyboard for faster editing. Keyboard shortcuts are significantly faster than clicking buttons.

Troubleshooting Playback Issues

Audio/Video Not Loading

Issue: Player shows error or doesn't load media, or floating player doesn't appear

Possible Causes:

  • Session doesn't have keep_media enabled
  • media_url is missing or invalid
  • Media file still processing on server
  • File unavailable or deleted from storage
  • Browser compatibility issue
  • Network connection problem
  • Firewall blocking media streaming

Solutions:

  1. Check that session.keep_media is true and session.media_url exists
  2. Refresh the page (F5 or Cmd + R)
  3. Verify transcript processing completed successfully
  4. Check internet connection stability
  5. Try a different browser (Chrome, Firefox, Edge, Safari)
  6. Disable browser extensions that might block media
  7. Check browser console for errors (F12)
  8. Contact support if issue persists

Playback is Choppy or Stuttering

Issue: Audio/video plays with interruptions or lag

Possible Causes:

  • Slow internet connection or high latency
  • Browser performance issues (too many tabs)
  • Large video file streaming
  • Computer CPU/memory overload
  • Background processes consuming resources

Solutions:

  1. Pause and let media buffer (wait 5-10 seconds)
  2. Reduce playback speed temporarily (0.75x to reduce buffering needs)
  3. Close other browser tabs and applications
  4. Try a wired connection instead of WiFi
  5. Restart your browser
  6. Clear browser cache and cookies
  7. Use audio-only if video isn't needed (less bandwidth)
  8. Check system resources (Task Manager / Activity Monitor)

Player Controls Not Responding

Issue: Buttons don't work, slider doesn't move, or controls are unresponsive

Possible Causes:

  • JavaScript error in page
  • Browser issue or extension conflict
  • Page not fully loaded
  • React component error
  • Network timeout

Solutions:

  1. Refresh the page completely
  2. Clear browser cache (Ctrl + Shift + Delete)
  3. Try incognito/private mode (rules out extension issues)
  4. Use a different browser
  5. Check browser console for JavaScript errors (F12 → Console tab)
  6. Disable browser extensions one by one to identify conflicts
  7. Update browser to latest version

Playback Position Desynchronized

Issue: Highlighted word doesn't match audio, or transcript shows wrong position

Possible Causes:

  • Timestamp inaccuracy in transcript data (rare)
  • Browser rendering lag on large documents
  • Timecode offset not properly set
  • Network latency affecting progress updates
  • Large document performance issue

Solutions:

  1. Refresh the page to reset state
  2. Pause and resume playback to resync
  3. Click a word in the transcript to manually sync position
  4. Restart playback from a known correct position
  5. Check timecode offset setting (may need adjustment)
  6. Verify timestamp data in document is accurate
  7. Report to support if timestamps are systematically wrong

No Sound

Issue: Video plays but no audio heard, or audio should play but doesn't

Possible Causes:

  • System volume muted
  • Browser tab muted
  • Player muted (isMuted state true)
  • Audio output device issues
  • Wrong audio output selected
  • Audio driver problems

Solutions:

  1. Check system volume settings (not muted, volume up)
  2. Check browser tab isn't muted (right-click tab, look for "Unmute tab")
  3. Verify correct audio output device selected in system settings
  4. Test audio in other applications (YouTube, Spotify, etc.)
  5. Try different audio output (headphones vs speakers)
  6. Restart browser completely
  7. Restart computer if audio drivers may be stuck
  8. Check volume mixer in OS (Windows: Volume Mixer, Mac: Sound preferences)

Floating Player Disappeared

Issue: Draggable player window is not visible

Possible Causes:

  • Dragged off-screen accidentally
  • Session doesn't have media
  • keep_media is false
  • Browser window too small

Solutions:

  1. Check if session.keep_media is true
  2. Refresh the page (resets player position)
  3. Maximize browser window
  4. Check if player is just outside visible area (try different screen)
  5. Clear localStorage (may reset player position preference)

Slider Not Seeking

Issue: Can't click or drag progress slider, or seeking doesn't work

Possible Causes:

  • Duration not loaded yet
  • ReactPlayer not fully initialized
  • setTime function not working
  • Slider disabled or covered by another element

Solutions:

  1. Wait for media to fully load (duration shows correctly)
  2. Refresh the page
  3. Try clicking words in transcript instead (alternative seeking method)
  4. Check browser console for errors
  5. Use timecode button as alternative seeking method

Best Practices

Efficient Playback Habits

  1. Master Keyboard Shortcuts - Significantly faster than clicking
    • Space for play/pause becomes muscle memory
    • Arrow keys with Ctrl/Cmd for skip forward/back
    • Plus/minus for speed adjustment
  2. Adjust Speed Dynamically - Change speed based on current content
    • Slow down for unclear sections (0.75x)
    • Speed up for accurate sections (1.5x-1.75x)
    • Don't stick to one speed for entire file
  3. Leverage Click-to-Seek - Fastest way to jump to specific words
    • No need to drag slider or enter timecodes
    • Just click the word and listen
  4. Position Floating Player Strategically
    • Move player to non-obstructing location for your screen
    • Right side if you're reviewing left column
    • Bottom right to stay out of way of text
  5. Pause Before Editing - Never try to type while audio plays
    • Hit Space to pause instantly
    • Make your edits
    • Hit Space to resume

Quality Assurance

  1. Listen to Every Edit - Always verify corrections by listening
    • Click words you changed to hear actual audio
    • Confirm your correction matches what was said
  2. Use Rewind Liberally - When in doubt, listen again
    • Ctrl/Cmd + ArrowLeft is instant
    • Better to listen twice than guess wrong
  3. Slow Down for Critical Sections - Accuracy over speed
    • 0.75x for proper names, numbers, technical terms
    • 0.5x for truly unclear audio
  4. Context is Key - Listen to surrounding sentences
    • Understanding context helps decipher unclear words
    • Click on sentence before/after unclear word
  5. Trust Your Ears Over Text - Audio is the source of truth
    • If audio says something different, change the text
    • Don't assume transcript is correct

Productivity Tips

  1. First Pass at Higher Speed - Save time on initial review
    • 1.25x-1.5x for first listen-through
    • Catch obvious errors quickly
    • Flag uncertain sections with comments
  2. Second Pass at Targeted Speeds - Strategic speed selection
    • 1.0x for normal review
    • 0.75x for commented/flagged sections
    • 1.75x for final verification
  3. Use Targeted Verification - Don't listen to everything
    • If transcript looks 95% accurate, only verify questionable 5%
    • Click specific words instead of full listen-through
    • Much faster for high-quality transcripts
  4. Take Listening Breaks - Avoid ear fatigue
    • Break every 30-60 minutes
    • Listening fatigue reduces accuracy
    • Rest ears to maintain quality
  5. Batch Similar Tasks - Reduce cognitive switching
    • Do all speaker labels first
    • Then all text corrections
    • Then all formatting
    • Finally verify with full listen

Workflow Optimization

  1. Use Comments as Bookmarks - Track your progress
    • Add comment at uncertain sections during fast pass
    • Review comments systematically at slower speed
    • Delete comments as you resolve them
    • Comment count shows remaining work
  2. Combine Click-to-Seek with Search - Powerful combination
    • Search for uncertain term (e.g., technical word)
    • Click each occurrence to verify
    • Correct all instances efficiently
  3. Learn Your Optimal Speeds - Everyone is different
    • Experiment with different speeds
    • Find your comprehension threshold
    • Balance speed vs accuracy for your ears
  4. Position Player for Your Setup - Customize for your screen
    • Dual monitors: move player to second screen
    • Single monitor: move player to less-used corner
    • Large screen: player can stay in default position

Frequently Asked Questions

Can I download the audio/video file?

Yes, use the Export function in the toolbar and select "Media File" or similar option from the export modal. The handleMediaDownload() function creates a download link from session.media_url.

Why is my video low quality?

Video is streamed at a quality optimized for playback performance. The original file maintains full quality. Streaming quality may also depend on your internet connection speed.

Can I play from a specific timestamp?

Yes, multiple methods:

  • Click any word in the transcript to jump to that position
  • Click on the waveform to jump to that position
  • Use the progress slider to seek to any position
  • Use the timecode button to set an offset (for document-wide adjustment)

Does the player work offline?

No, media files are streamed from session.media_url on Scriptix servers and require an active internet connection.

Can I adjust volume?

Yes, use your system volume controls or the browser tab's volume control (right-click tab). The player volume is set to 1 (100%) by default. There's also an isMuted state that can mute/unmute.

What if the audio is out of sync with the transcript?

This is very rare. First, refresh the page to reset state. If timestamps are consistently off, you may need to adjust the timecode offset using the Timecode button. If the issue persists, contact support as there may be a timestamp processing error in the source data.

Can I loop a section for repeated listening?

Not directly with a loop button, but you can:

  • Click a word to return to that position repeatedly
  • Use the rewind button (Ctrl/Cmd + ArrowLeft) to go back 5 seconds
  • Drag the slider handle back to replay sections

Does playback position save when I close the editor?

Playback position is session-based (not persisted across page loads). When you return to the editor, playback starts from the beginning. The editor does save your scroll position in some cases.

Why does the floating player appear on the left side?

Default position is left side (bottom left area, above waveform). This position is chosen to minimize obstruction of transcript text, which is center-focused. You can drag it anywhere you prefer.

What's the difference between the timecode button and clicking the time display?

Important correction from original doc: The timecode button opens a dialog to set the document-wide timecode offset (shifts all timestamps), not for seeking to a specific time. The current time display is not clickable for seeking - use click-to-seek in the transcript or drag the slider instead.

Can I resize the floating player?

The floating player has a fixed size (300px × 170px). Some implementations may allow resizing by dragging edges, but this is not standard in the current codebase.

Why are there two separate player components?

Design rationale:

  • Floating player - Provides video/audio preview, can be repositioned to not obstruct text
  • Fixed controls bar - Always accessible at bottom, doesn't move with scrolling, intuitive location for media controls

This separation allows you to position the video preview wherever convenient while keeping controls consistently accessible.

Next Steps

Enhance your editing workflow:


Start listening! Press Space to play and begin reviewing your transcript with full audio context.