Media Transcript

> Create interactive transcripts for media elements

A dependency-free web component (custom element + shadow DOM) for creating interactive transcripts via the WebVTT API.
Operates in two modes:

- Track to transcript: parse an existing element to generate a transcript automatically.
- Transcript to track: parse an existing transcript to create a synthetic TextTrack for your media.

Install

``sh
npm install media-transcript
`

Modes

There are two modes for using the element.
Both start by binding a to your media element (

`html


`

$3

If you already have captions for your media and just want to create a transcript from those captions,
simply bind the media to the .

When using this mode, the captions must be .vtt format.
This is because uses the native WebVTT and TextTrack APIs to parse the track.
The .srt format does not implement these APIs.

`html


`

View the track-to-transcript example

$3

If your has elements already set in the HTML, binding it to media will cause that media to display the transcript as captions.
Note that user agents do not provide an interface for

`html

media="my-video"
kind="captions"
label="English captions"
srclang="la"
>




Chapter 1


>Lorem ipsum dolor sit amet consectetur adipisicing elit. >
Est nesciunt incidunt,
>deleniti doloremque natus ad id nam laborum amet facilis voluptatem
odio? >
>Incidunt rerum sunt quo eaque sapiente sit sequi. >

`

Usage

Start by adding the custom elements to your page.
Various builds are available to accomplish this, provided by microbundle.
All bundles ship with both the and custom elements.

$3

The UMD bundle includes MediaCue & MediaTranscript and will work in all browsers.

`html

`

$3

If you're using a browser that supports ES modules, you can load the custom elements as modules.
This can also be done via the bundle or as independent modules.

`html

`

$3

If you're working in a Node.js environment, you can just import and use the JavaScript API.

`javascript
import { MediaCue, MediaTranscript } from "media-transcript";

const transcript = new MediaTranscript({
/ transcript options /
});
const cue = new MediaCue({
/ cue options /
});

transcript.appendChild(cue);
document.body.appendChild(transcript);
`

API

Since and are custom elements,
there is both a JavaScript API and an HTML API (attributes).

$3

| Attribute | Description | Values |
| --------- | ----------- | ------ |
| media | an id reference (IDREF) that corresponds to the media element's id | Any valid string |
| timestamp | enable timestamps for all child elements | boolean (i.e., or for proper conformance) |
| role | set a role to make the transcript interactive. |

• listbox: treat the transcript as a listbox widget, automatically enhancing the elements with [role="option"], managed roving focus, and proper aria-selected values.
• Other roles will be added

|
| aria-orientation | Change keyboard behavior when an interactive mode is enabled |

• vertical: only up/down arrow keys control focus
• horizontal: only left/right arrow keys control focus
• unset (default): all arrow keys control focus
|

$3

| Attribute | Description | Values |
| --------- | ----------- | ------ |
| start | the cue's start time | decimal number string. Assumed to be 0 when omitted. |
| end | the cue's end time | decimal number string. |
| timestamp | enable the cue's built-in timestamp (set as a element) | boolean (i.e., or ` for proper conformance) |