Lab 4.3: Subtitle Parsing & Timing Validation

Objective

In this hands-on lab, you will act as a media localization engineer diagnosing broken subtitle streams. You will convert and repair corrupted SubRip Text (.srt) and WebVTT (.vtt) files, resolve millisecond delimiter errors, fix missing cue boundary separators, and repair unclosed inline formatting tags using Visual Studio Code and Regular Expressions.

Required Setup & Prerequisites

• Editor: Visual Studio Code installed.

• Working Directory: Open your loc_lab working directory in VS Code.

Step-by-Step Instructions

Step 1: Create Corrupted Subtitle Assets

1. Open VS Code and navigate to assets/loc/media/.

2. Create broken_subtitles.srt and paste:

   Code snippet

   broken_subtitles.srt
   1
   00:00:01.500 --> 00:00:04.200
   Welcome to the <i>Global Release event!
   
   2
   00:00:04,200 --> 00:00:08,000
   ¡Hola! ¿Cómo estás?

   (Notice line 2 uses periods instead of commas, and line 3 has an unclosed <i> tag).

3. In the same directory, create broken_captions.vtt and paste:

   Code snippet

   broken_captions.vtt
   WEBVTT
   
   cue-01
   00:00:01,500 --> 00:00:04,200
   <v Narrator>Welcome back to the dashboard!
   cue-02
   00:00:04.500 --> 00:00:08.000
   <v Alex>¡Bienvenido a la plataforma!

   (Notice line 4 uses commas instead of periods, and there is no blank line between cue-01 and cue-02).

4. Save both files (Cmd + S on macOS / Ctrl + S on Windows).

Step 2: Remediate the SRT Asset (broken_subtitles.srt)

1. Open broken_subtitles.srt in VS Code.

2. Fix Millisecond Delimiters:

   • Line 2 uses periods (00:00:01.500 --> 00:00:04.200), which violates the SRT specification.

   • Change periods to commas on line 2: 00:00:01,500 --> 00:00:04,200.

3. Fix Unclosed Inline Tags:

   • Line 3 contains <i>Global Release event!.

   • Add the closing tag </i>: <i>Global Release event!</i>.

4. Save the file as clean_subtitles.srt:

   Code snippet

   clean_subtitles.srt
   1
   00:00:01,500 --> 00:00:04,200
   Welcome to the <i>Global Release event!</i>
   
   2
   00:00:04,200 --> 00:00:08,000
   ¡Hola! ¿Cómo estás?

Step 3: Remediate the WebVTT Asset (broken_captions.vtt)

1. Open broken_captions.vtt in VS Code.

2. Fix WebVTT Millisecond Delimiters:

   • Line 4 uses commas (00:00:01,500 --> 00:00:04,200). WebVTT strictly requires periods.

   • Change commas to periods: 00:00:01.500 --> 00:00:04.200.

3. Fix Missing Cue Boundary Separators:

   • Notice line 6 (cue-02) directly follows line 5 without an empty line separating them. Media engines will fail to parse cue-02.

   • Insert a blank line after line 5.

4. Save the file as clean_captions.vtt:

   Code snippet

   clean_captions.vtt
   WEBVTT
   
   cue-01
   00:00:01.500 --> 00:00:04.200
   <v Narrator>Welcome back to the dashboard!
   
   cue-02
   00:00:04.500 --> 00:00:08.000
   <v Alex>¡Bienvenido a la plataforma!

Step 4: Validate Subtitle Assets with Regex Search in VS Code

Use Regular Expressions in VS Code to ensure no timestamp delimiter errors remain across your workspace:

1. Open the Find in Files search pane (Cmd + Shift + F / Ctrl + Shift + F).

2. Enable the Use Regular Expression option (Alt + R / Option + R).

3. Search for WebVTT timestamp errors (commas instead of periods):

   \d{2}:\d{2}:\d{2}\,\d{3}

   Verify 0 matches found in .vtt files.

4. Search for SRT timestamp errors (periods instead of commas):

   \d{2}:\d{2}:\d{2}\.\d{3}

   Verify 0 matches found in .srt files.

Self-Verification Checklist

Check your subtitle assets against these production specifications:

• [ ] clean_subtitles.srt uses commas for millisecond delimiters and has balanced HTML inline tags (<i>...</i>).

• [ ] clean_captions.vtt begins with the WEBVTT header line and uses periods for millisecond delimiters.

• [ ] Every cue block in both files is separated by at least one empty line.

• [ ] Workspace Regex search returns 0 timestamp syntax errors.