webvtt-player-ts

webvtt-player-ts is a TypeScript rewrite of the original webvtt-player project. It provides the same functionality, letting you play an audio file while viewing its WebVTT subtitles as an interactive transcript, but with improved type safety and maintainability thanks to TypeScript.

webvtt-player is a React component that lets you play an audio file while viewing its WebVTT subtitles as an interactive transcript. Take a look at the example site to get a sense of what this means.

webvtt-player was developed as part of the Unlocking the Airwaves project which received generous support from the National Endowment for the Humanities.

$ npm install webvtt-player-ts

import {Player} from "webvtt-player-ts"

<Player
  src="https://example.org/audio.mp3"
  transcript="https://example.org/transcript.vtt" />

OHMS Metadata Track

webvtt-player-ts can also display a WebVTT metadata track. The metadata object is modeled after the OHMS Indexing system.

Fields supported:

{
  "title": "",
  "title_alt": "",
  "synopsis": "",
  "synopsis_alt": "",
  "keywords": "",
  "keywords_alt": "",
  "subjects": "",
  "subjects_alt": "",
  "gpspoints": {
    "gps": "00.0000000, 00.0000000",
    "gps_zoom": "0",
    "gps_text": "",
    "gps_text_alt": ""
  },
  "hyperlinks": {
    "hyperlink": "http://example.org",
    "hyperlink_text": "",
    "hyperlink_text_alt":, ""
  }
}

gpspoints will be displayed as a link to Google Maps and hyperlinks will be displayed as a link.

The metadata track can be loaded with the metadata parameter.

import {Player} from "webvtt-player-ts"

<Player
  src="https://example.org/audio.mp3"
  transcript="https://example.org/transcript.vtt"
  metadata="https://example.org/metadata.vtt" />

Demo

npm install
npm start
open http://localhost:3000

Using Without React

You can use webvtt-player-ts outside of a React project if you use the built JavaScript bundle from the latest release directly in the browser. Simply provide an anchor element with the id webvtt-player and use data-audio and data-transcript attributes to point to the audio and transcript files (data-metadata is optional):

<div id="webvtt-player"
     data-audio="audio.mp3"
     data-transcript="transcript.vtt"
     data-metadata="metadata.vtt" />

You should be able to find the latest build as part of the webvtt demo site:

https://github.com/odedindi/webvtt-player-ts/webvtt-player.js

To generate the JavaScript file run the following command which will write them to the public directory:

npm run build-public