jasonwebb/revealjs-subtitles

A Reveal.js plugin to add real-time subtitles to presentations

Installation

1. Clone or download this repo.
2. Copy the subtitles folder into the Reveal.js plugin folder.
3. Add a reference to the CSS file in your presentation's HTML file:

<link rel="stylesheet" href="plugin/subtitles/subtitles.css">

4. Load the JavaScript file as a dependency through the Reveal.js initialize function:

<script>
Reveal.initialize({
  dependencies: [
    { src: 'plugin/subtitles/subtitles.js', async: true }
  ]
});
</script>

How it works

This plugin uses the SpeechRecognition interface of the Web Speech API available in Chrome (as of September 2019) to do real-time speech-to-text transcription.

On load, this plugin will inject the following HTML at the end of your presentation's DOM:

<div id="subtitles-container">
  <div id="subtitles-inner-container">
    <div id="subtitles">
      <span id="final_text"></span>
      <span id="interim_text"></span>
    </div>
  </div>
</div>

• final_text will contain text that has been fully parsed by the speech-to-text engine.
• interim_text will contain text that is actively being parsed, and may change. Once the engine has fully parsed it, this text will be appended to the text in final_text.

Requirements

• Presentation must be run in Chrome, because it is the only browser that currently supports the Web Speech API.
• You must be online while running your presentation, because the Web Speech API makes services calls, likely to Google Cloud Speech-to-Text.

revealjs-subtitles's Issues

Instead of speech-to-text is it possible to just feed the text (say as a vtt file)

When I already have the text, can I just feed in my text for each slide?

Add toggle key to enable/disable transcription

Probably use T. If the recognition API doesn't like to start and stop quickly, the #subtitles element can just be hidden.

Add max limit to subtitles box

Look into removing old text after a period of time, like a "decay" mechanism.