CodePen

HTML

            
              <div id="cc">
  <span id="cc-button" ><button onclick="toggleSpeechRecognition(event)"><abbr title="Closed Captioning">CC</abbr> Click to caption</button></span>
  <span id="cc-text" style="display: none;" onclick="toggleSpeechRecognition(event)" tabindex="0">Begin speaking. Click to stop.</span>
</div>

<article>
  <h1>HTML5 Closed Captioning</h1>
  
  <ol>
    <li>Open this page in Chrome desktop (25+)</li>
    <li>Click button to begin captioning</li>
    <li>Allow use of microphone</li>
    <li>Begin talking. May need to pause occasionaly.</li>
    <li>Click to caption stop</li>
  </ol>
</article>

            
          
!

CSS

            
              /* Layout styling */
html,
body {
  height: 100%;
  background: #f0f0f0;
}

body {
  font-family: 'Ubuntu', sans-serif;
  line-height: 1.5;
  padding: 4em 1em 1em;
  text-align: center;
}

ol {
    padding-left: 0;
}

li {
  list-style-position: inside;
}

/* Caption Styling */
#cc {
  text-align: center;
  width: 80%;  
  left: 10%;
  position: fixed;
  top: 1em;
}

#cc span {
  display: inline-block;
  width: auto;
  margin: 0 auto;
  background: black;
  color: white;
  font-size: 1.5em;
  font-family:monospace;
  padding: 0.5em;
  min-height: 1.5em;
  line-height: 1.5em;
}

#cc button {
  font-family:monospace;
  appearance: none;
  border: 0;
  font-size: 1em;
  background: transparent;
  color: white;
}

#cc abbr {
  background: white;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 0.8em;
  display: inline-block;
  padding: 0 0.25em;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var cc = document.getElementById('cc-text');
var button = document.getElementById('cc-button');

var recognizing = false;

var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
  
recognition.onstart = function() {
  recognizing = true;
};

recognition.onerror = function(event) {};
recognition.onend = function() {
  recognizing = false;
};

recognition.onresult = function(event) {
  for (var i = event.resultIndex; i < event.results.length; ++i) {
    if(event.results[i][0].confidence > 0.4) {
      cc.innerHTML = capitalize(event.results[i][0].transcript);
    }
  }
};

function capitalize(s) {
  var first_char = /\S/;
 return s.replace(first_char, function(m) { 
    return m.toUpperCase(); 
  }); 
}

function toggleSpeechRecognition(event) {
  if(recognizing) {
    recognition.stop();
    cc.style.display = "none";
    button.style.display = "inline-block";
    return;
  } else {
    cc.style.display = "inline-block";
    button.style.display = "none";
    recognition.start();
  }
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................