Caption your speech on any website using the Web Speech API. Supports all browsers except for Firefox. To start captioning speech, add this script as a bookmarklet (paste contents in the URL field with "javascript:" at the beginning) and run the bookmark. To stop captioning speech, click the caption box.

autocaption.js

javascript:(() => {
  const div = document.createElement('div');
  div.style.alignItems = 'flex-end';
  div.style.backgroundColor = 'black';
  div.style.top = '0';
  div.style.color = 'white';
  div.style.display = 'none';
  div.style.fontFamily = 'Google Sans';
  div.style.fontSize = '3vh';
  div.style.lineHeight = '4vh';
  div.style.maxHeight = '4vh';
  div.style.overflow = 'hidden';
  div.style.padding = '0.5vh 0.75vh';
  div.style.position = 'fixed';
  div.style.textAlign = 'start';
  div.style.zIndex = '10000';

  const recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onresult = event => {
    div.style.display = 'flex';
    let transcript = '';
    for (let i = 0; i < event.results.length; i += 1) {
      transcript += event.results[i][0].transcript;
    }
    div.textContent = transcript;
  };
  recognition.onend = event => recognition.start();

  div.onclick = event => {
    recognition.onend = event => {};
    recognition.abort();
    div.remove();
  };

  document.body.appendChild(div);
  recognition.start();
})();