<whisper-transcript>

This web-component lets you view the JSON output of Whisper to graphically examine the confidence level and timing of each word. You will want to run whisper with the --word_stamps turned on:

$ whisper --model large-v3 --word_timestamps True media.mp3

You can see a demo at https://markpbaggett.github.io/whisper-transcript-sticky

Installation

yarn install whisper-transcript-sticky

Usage

Load the module:

<script type="module" src="https://cdn.jsdelivr.net/npm/whisper-transcript-sticky@latest/dist/index.js"></script>

And use it!

<whisper-transcript audio="media.mp3" url="media.json"></whisper-transcript>

If you have a video file that will play natively in the browser you can use the video attribute:

<whisper-transcript video="media.mp4" url="media.json"></whisper-transcript>

Develop

You will want to clone this repository and then:

yarn install
yarn start

This will open the page in the demo directory. If you like you can swap out the audio.mp3 and audio.json files for ones you've created to see what a transcript you've generated looks like.

How is this different than edsu's

This supports streaming via HLS and the cues are sticky so you always see the player. Other than that, no differences.