How do we load a WebVtt file in React?

Question

This is my data structure

WEBVTT

00:00:15.000 --> 00:00:17.951 At the left we can see...

00:00:18.166 --> 00:00:20.083 At the right we can see the...

00:00:20.119 --> 00:00:21.962 ...the head-snarlers

I am trying to parse a web vtt file. For this I wrote :

     var data = require('./captions.en.vtt');

Error

client:47 ./src/captions.en.vtt Module parse failed: C:\Users\sampr\Desktop\MyVIew\WebVtt\src\captions.en.vtt Invalid number (3:0) You may need an appropriate loader to handle this file type.

Could someone please help me?

Answer 1

You need a appropriate loader for the file type (.vtt).

Install file-loader (npm install --save-dev file-loader) and you could use it directly like this:

var data = require('file-loader!./captions.en.vtt');

Answer 2

Using node-webvtt library you can easily load and get the properties in JSON format.

Install it first by runinning: npm i node-webvtt then use it in your component:

import { parse } from "node-webvtt";
const lesson1Vtt = `WEBVTT
::cue(v[voice="Speaker1"]) { color: white }

1
00:00:00.110 --> 00:00:01.310
<v Speaker1>Lesson one.

2
00:00:01.310 --> 00:00:03.080
<v Speaker1>Carpentry and crafts.

3
00:00:03.590 --> 00:00:04.970
<v Speaker1>Discuss the picture.`

const parsed = parse(lesson1Vtt, { strict: false });
console.log("parsedVtt", parsed);

cues property contains all the values.