View WebVTT as a transcript
npm install webvtt-playerwebvtt-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].
``bash`
$ npm install webvtt-player
`javascript
import {Player} from "webvtt-player"
transcript="https://example.org/transcript.vtt" />
`
webvtt-player can also display a WebVTT metadata track. The metadata object is modeled
after the OHMS Indexing system.
Fields supported:
`json`
{
"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.
`javascript
import {Player} from "webvtt-player"
transcript="https://example.org/transcript.vtt"
metadata="https://example.org/metadata.vtt" />
`
npm install
npm start
open http://localhost:3000
[WEBVTT]: https://en.wikipedia.org/wiki/WebVTT
[JavaScript API]: https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API
[React]: https://reactjs.org/
[example site]: https://umd-mith.github.io/webvtt-player
[Unlocking the Airwaves]: https://mith.umd.edu/research/unlocking-the-airwaves/
[National Endowment for the Humanities]: https://www.neh.gov/
You can use webvtt-player 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 anddata-transcript attributes to point to the audio and transcript files (data-metadata is optional):
`html`
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://umd-mith.github.io/webvtt-player/webvtt-player.js
To generate the JavaScript file run the following command which will write them
to the public` directory:
npm run build-public