Technical Specification: Online SRT Subtitle Synchronization Tool

Overview

A high-performance, browser-based utility designed to adjust the timestamps of SubRip (SRT) subtitle files. This tool allows users to shift the entire subtitle timeline by a fixed millisecond offset to fix audio/video synchronization issues without requiring third-party software or server-side processing.

Key Features

• Precision Shifting: Input field for millisecond adjustment (e.g., +2500ms to delay, -500ms to advance).
• Client-Side Processing: All parsing and mathematical timestamp manipulation happens locally in the browser memory using the FileReader API and Blob objects.
• Real-Time Preview: A truncated text area showing the first few lines of the file "before" and "after" the shift so users can verify the format.
• Encoding Safety: Handles standard UTF-8 encoded SRT files.
• One-Click Download: Instant creation of a downloadable modified .srt file.

UI/UX Design

• Layout:
  • Header: Clean, centered title with a brief explanation of the tool's purpose.
  • Main Interaction Area: A centralized card layout featuring a drag-and-drop zone for file uploads.
  • Settings Panel: A clean input form for the millisecond offset, utilizing numeric steppers for ease of use.
  • Action Area: Prominent primary buttons for "Sync Subtitles" and "Download" with a secondary "Reset" option.
• Aesthetic:
  • Color Palette: Professional light-mode aesthetic using Slate-50 as the page background, white cards (bg-white), and Indigo-600 as the primary brand color for buttons and interactive states.
  • Typography: Sans-serif, human-readable fonts (Inter or System UI) with comfortable line-heights.
  • Transitions: Subtle "fade-in" effects for dynamic results sections and smooth scale transitions on button hover states.

Technical Implementation

• Architecture: Single HTML5 file utilizing Tailwind CSS (CDN) for styling and vanilla JavaScript for logic.
• Constraints Compliance:
  • No Storage: No use of localStorage, sessionStorage, or IndexedDB. All data is transient.
  • Sandbox Compatibility: Logic avoids window.open, alert(), or any restricted browser APIs. Modals are constructed using hidden HTML elements that toggle visibility via CSS classes.
  • Security: Use Blob and URL.createObjectURL to trigger downloads, ensuring no server-side communication.
• File Handling:
  • Use FileReader to read the uploaded .srt file as text.
  • Parse the text using a regular expression to identify the timestamp blocks (e.g., 00:00:00,000 --> 00:00:00,000).
  • Perform string math to calculate the new timestamps.
  • Generate a new Blob containing the shifted subtitle data.
  • Create an ephemeral anchor tag to trigger the file download.