Subtitle Editor

A powerful React subtitle editor component with multi-language support, waveform visualization, and real-time editing capabilities.

Features

• 🎬 Video Player Integration - Seamlessly integrated video player with subtitle synchronization
• 🌊 Waveform Visualization - Visual audio waveform for precise timing adjustments
• 🌍 Multi-language Support - Edit and manage subtitles in multiple languages
• ⚡ Real-time Editing - Instant preview of subtitle changes
• 📝 Multiple Formats - Support for SRT, VTT, and ASS subtitle formats
• 🔄 Auto-translation - Built-in translation capabilities
• 💾 Local Storage - Automatic saving to browser localStorage
• ⌨️ Keyboard Shortcuts - Efficient editing with keyboard commands
• 📊 Timeline View - Visual timeline for subtitle management
• 🎯 Precise Control - Split, merge, and adjust subtitle timings

Installation

npm install @lilsnake/subtitle-editor

or

yarn add @lilsnake/subtitle-editor

or

pnpm add @lilsnake/subtitle-editor

Usage

Basic Example

import { SubtitleEditor } from '@lilsnake/subtitle-editor';


function App() {
  return (
    <SubtitleEditor
      videoUrl="/path/to/video.mp4"
      subtitleUrl="/path/to/subtitle.srt"
      initialLanguage="en"
    />
  );
}

Multi-language Example

import { SubtitleEditor } from '@lilsnake/subtitle-editor';


function App() {
  return (
    <SubtitleEditor
      videoUrl="/path/to/video.mp4"
      subtitleUrls={{
        en: '/path/to/subtitle-en.srt',
        zh: '/path/to/subtitle-zh.srt',
        es: '/path/to/subtitle-es.srt',
      }}
      initialLanguage="en"
      persistToLocal={true}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | videoUrl | string | - | URL of the video file | | subtitleUrl | string | - | URL of the subtitle file (single language) | | subtitleUrls | Record<string, string> | - | URLs for multiple language subtitles | | initialLanguage | string | 'en' | Initial language to display | | persistToLocal | boolean | true | Enable/disable localStorage persistence | | className | string | - | Additional CSS classes | | filmId | string | - | Optional film ID for business integration |

Keyboard Shortcuts

• Space - Play/Pause video
• Cmd/Ctrl + Z - Undo changes
• Arrow keys - Navigate timeline

Supported Formats

• SRT - SubRip Text
• VTT - WebVTT
• ASS - Advanced SubStation Alpha
• JSON - Custom JSON format

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Requirements

• React 18.0+ or 19.0+
• react-i18next for internationalization
• i18next for translations

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.