vtt-adjust

Move and scale all timecodes in a WebVTT file.

Usage no npm install needed!

<script type="module">
  import vttAdjust from 'https://cdn.skypack.dev/vtt-adjust';
</script>

README

vtt-adjust

NPM

Utility for moving and, if necessary, stretching a .vtt (WebVTT) file. Useful for correcting desync issues after a transcode or cropping.

Example

During a format conversion, 3 seconds of blank frames were trimmed from the classic motion picture "Revenge of the Ghost Dinosaur". This resulted in all the captions now showing 3 seconds too early:

Illustration of the Problem

We can make vtt-adjust correct all the caption cues by telling it the correct position of one cue:

// Log and move all cues forward by 3 seconds.

var vttAdjust = require('vtt-adjust');

var adjuster = vttAdjust([
  'WEBVTT',
  '',
  '00:14:10.000 --> 00:14:12.000',
  'Sally, the Masked Ranger... was me all along.',
  '',
  '00:14:13.000 --> 00:14:15.000',
  'Oh... Harry! I had no idea...',
  '',
  '00:14:16.000 --> 00:14:18.000',
  'Rarrrr!',
  'OMG! Run',
  ''
  '00:14:19.000 --> 00:14:21.000',
  'Aaaaahhh, my arm...'
].join('\\n'));

console.log(adjuster.cues.map(JSON.stringify).join('\\n'));
/* Output: -------------------
{"id":0,"start":850000,"text":"Sally, the Masked Ranger... was me all along."}
{"id":1,"start":853000,"text":"Oh... Harry! I had no idea..."}
{"id":2,"start":856000,"text":"Rarrrr!\\nOMG! Run!"}
{"id":3,"start":859000,"text":"Aaaaahhh, my arm..."}
                            */

// Fix all cues by using the first cue as a reference:
// It should start at 14 minutes, 13 seconds (=853000ms).
adjuster.move(adjuster.cues[0], 853000);

console.log(adjuster.toString());
/* Output: -------------------
WEBVTT

00:14:13.000 --> 00:14:15.000
Sally... the Masked Ranger was me all along.

00:14:16.000 --> 00:14:18.000
Oh... Harry! I had no idea...

00:14:19.000 --> 00:14:21.000
Rarrrr!
OMG! Run!

00:14:22.000 --> 00:14:24.000
Aaaaahhh, my arm...
## Download

For Node.js, use npm:

npm install vtt-adjust
## In the Browser Download and include as a `