<whisper-transcript>

This is an example of using the whisper-transcript web component to display a Whisper speech-to-text transcript that was generated using word timestamps in order to visualize the confidence scores in the context of the words and their sound:

$ whisper --model small audio.mp3 --word_timestamps True

Running this command generates an audio.json file which contains detailed timestamp information for each word, and also a probability score that indicates the confidence in Whisper's transcription. Note: I intentionally ran with the small model in order to get more varied probabilities in this example.

View the HTML source to see how to use the whisper-transcript web component in your own pages. But it's basically:

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