Skip to content

VTT Editor Pro v2.1 ‐ Usage Guide

Jump to bottom
RDTvlokip edited this page Nov 6, 2025 · 3 revisions

📖 VTT Editor Pro v2.1 - Usage Guide

Complete step-by-step user guide for VTT Editor Pro v2.1.

🚀 Getting Started

Step 1: Load Audio File

  1. Click the "📁 Import MP3" button in the top bar
  2. Select an audio file from your computer (MP3, WAV, OGG, or M4A)
  3. Wait for the waveform to load
  4. The waveform will appear in the Timeline section

Tip: You can also drag and drop your audio file directly onto the page.

Step 2: Create Your First Cue

Method 1: Quick Add

  1. Click "➕ Add Region" button or press Enter
  2. A 2-second region appears at the current playback position
  3. The cue editor opens automatically

Method 2: Manual Add

  1. Set the Start time (e.g., 5.000)
  2. Set the End time (e.g., 7.500)
  3. Type your subtitle text
  4. Click "➕ Add Cue"

Method 3: Mark While Playing

  1. Play the audio (Space key)
  2. Press Ctrl+S to mark the start point
  3. Press Ctrl+E to mark the end point
  4. Type your text
  5. Press Ctrl+Enter to save

Step 3: Edit Region Timing

Drag to Move

  • Click and drag the middle of a region to move it
  • The entire cue shifts in time
  • Timestamps update automatically

Resize Handles

  • Click and drag the white handles at region edges
  • Left handle: Adjust start time
  • Right handle: Adjust end time
  • v2.1: Tooltip shows precise timestamp while dragging

Snap-to-Grid (v2.1)

  1. Enable "🧲 Snap Grid" checkbox
  2. Choose interval (100ms, 250ms, 500ms, 1s)
  3. Regions automatically align to grid when resizing
  4. Perfect for consistent timing

Step 4: Edit Text

Quick Edit

  1. Double-click a region on the waveform
  2. The cue editor opens with that cue loaded
  3. Modify the text
  4. Click "💾 Update" or press Ctrl+Enter

From List

  1. Find the cue in the "📋 Liste des Cues" section
  2. Click the "✏️" edit button
  3. Modify text, timing, or color
  4. Click "💾 Update"

Step 5: Playback and Preview

Play Audio

  • Click "▶️ Play" button or press Space
  • Audio plays from current position
  • Active lyric highlights in real-time

Navigate

  • Click anywhere on the waveform to jump to that position
  • Use ← and → arrow keys to skip ±1 second
  • Click a lyric line to jump to that cue

Karaoke Display

  • Watch the "📝 Paroles complètes" panel on the right
  • The active line highlights in green
  • Auto-scrolls to keep active line visible

Step 6: Export Your Work

  1. Click "💾 Export VTT" button
  2. The file downloads automatically
  3. Filename matches your audio file (e.g., song.vtt)
  4. Ready to use with video players!

🎨 Customization

Change Cue Colors

  1. Select a cue (click region or edit button)
  2. Click the color picker in the cue editor
  3. Choose a new color
  4. Click "💾 Update"
  5. The region updates immediately

Random Color: Click the "🎲" button for a random color.

Color Palette

The default palette includes:

  • 🟢 Spotify Green (#1db954)
  • 🔴 Red (#ff6b6b)
  • 🔵 Blue (#54a0ff)
  • 🟡 Yellow (#f9ca24)
  • 🟣 Purple (#8854d0)
  • And 11 more vibrant colors

🔄 Batch Editing (v2.1)

Batch editing lets you modify multiple cues at once. See detailed guide

Quick Overview

  1. Click "📝 Batch Edit" button
  2. Choose a mode:
    • Find & Replace: Search and replace text
    • Transform: Change case (UPPERCASE, lowercase, etc.)
    • Modify: Add prefix/suffix to cue ranges
  3. Apply changes
  4. All cues update instantly

⏮️ Undo / Redo

Undo Changes

  • Click "↶" button or press Ctrl+Z
  • Reverts last action
  • Unlimited undo history

Redo Changes

  • Click "↷" button or press Ctrl+Y
  • Re-applies undone action

What's Tracked?

  • Add cue
  • Delete cue
  • Update text
  • Update timing
  • Batch edits
  • Color changes

📥 Import Existing VTT

Load VTT File

  1. Click "📄 Import VTT" button
  2. Select your .vtt file
  3. All cues load automatically
  4. Regions appear on waveform
  5. Ready to edit!

Note: Colors are preserved if saved with NOTE color: comments.

⚠️ Error Handling

Overlap Detection

When two cues overlap:

  • Both cues highlighted in orange
  • Warning badge: "⚠️ Chevauchement détecté"
  • You can allow overlaps with "🔀 Allow Overlap" toggle

Empty Text Warning

If you try to save a cue without text:

  • Yellow warning toast appears
  • Cue is saved but marked incomplete

Invalid Timestamps

If start ≥ end:

  • Red error toast: "Le début doit être avant la fin!"
  • Cue is not saved until fixed

💾 Auto-Save

VTT Editor Pro automatically saves your work:

  • Every 5 seconds to browser LocalStorage
  • On page reload, you can restore saved cues
  • Works offline (no internet needed)

Warning: Clearing browser data will erase auto-saved work.

🎯 Tips & Tricks

Productivity Tips

  1. Use keyboard shortcuts - Much faster than clicking

  2. Mark while playing - Use Ctrl+S and Ctrl+E to mark timestamps on-the-fly

  3. Snap-to-grid for consistency - Enable snap for professional timing

  4. Batch edit for corrections - Fix common typos across all cues instantly

  5. Use colors to organize - Different colors for speakers or sections

Workflow Example: Karaoke Timing

  1. Import audio
  2. Enable Snap Grid (250ms or 500ms)
  3. Play audio and mark start/end while listening
  4. Add text quickly
  5. Use Batch Edit to add "♪" prefix/suffix to all cues
  6. Export VTT

🔧 Advanced Features

Zoom Control

  • Zoom In: Click "🔍+" or scroll up on waveform
  • Zoom Out: Click "🔍-" or scroll down
  • Useful for precise timing adjustments

Clear All

  • "🗑️ Clear All" button removes ALL cues
  • Warning: This action cannot be undone after you create a new cue
  • Use with caution!

Overlap Toggle

  • "🔀 Allow Overlap" checkbox
  • Disabled (default): Overlaps blocked and highlighted
  • Enabled: Overlaps allowed, no warnings

🎵 Workflow Examples

Example 1: Song Lyrics

  1. Import MP3
  2. Play and listen to identify lines
  3. Mark start/end for each line
  4. Type lyrics
  5. Use Batch Edit → Add Prefix "♪ " and Suffix " ♪"
  6. Export VTT

Example 2: Video Subtitles

  1. Import audio extracted from video
  2. Enable Snap Grid (250ms)
  3. Create cues for dialogue
  4. Adjust timing precisely with handles
  5. Check for overlaps
  6. Export VTT and add to video file

Example 3: Podcast Chapters

  1. Import podcast audio
  2. Create longer cues (30s-2min)
  3. Label each segment
  4. Use colors for different topics
  5. Export for podcast player

🌐 Browser Compatibility

VTT Editor Pro works best in:

  • ✅ Chrome/Edge 90+: Fully supported
  • ✅ Firefox 88+: Fully supported
  • ✅ Safari 14+: Fully supported
  • ✅ Opera 76+: Fully supported

Note: Older browsers may have limited audio format support.

🐛 Troubleshooting

Waveform Not Loading

  • Check audio format: MP3 and WAV work best
  • Try a different browser: Some formats are browser-specific
  • File size: Very large files (>100MB) may take time

Regions Not Appearing

  • Refresh page: Sometimes a hard refresh helps (Ctrl+Shift+R)
  • Check console: Open browser DevTools and check for errors

Auto-Save Not Working

  • Enable cookies: LocalStorage requires cookies enabled
  • Check storage quota: Browser may be out of space

Export Not Downloading

  • Disable popup blocker: May block download
  • Check download folder: File may have downloaded

📚 Additional Resources

← Back to home | Keyboard shortcuts →

🎵 VTT Editor Pro

🏠 Home

🆕 v3.x

📘 Guides

🚀 Try it online 📜 Changelog

Clone this wiki locally