Versify

Welcome

Versify highlights text that's currently being spoken.

$("#target").versify();

Markup your transcript with start and end attributes and a verse class:

<span class="verse" from="00.00" to="08.609">To be or not to be-that is the question:</span>

Add some css for the ".voice-active" selector:

.voice-active {
  background-color: lightyellow;
  transition: background-color 0.2s
}

Alternatively, do what you like and pass an options object to versify:

<audio id="target" controls>
  <source src="Hamlet.mp3" type="audio/mpeg"> Your browser does not support HTML5 video.
</audio>
<span class="line" beginning="00.00" end="08.609">To be or not to be-that is the question:</span>
<span class="line" beginning="08.609" end="15.00">Whether 'tis nobler in the mind to suffer</span>
<span class="line" beginning="15.00" end="18.06">The slings and arrows of outrageous fortune,</span>
<span class="line" beginning="18.06" end="22.96">Or to take arms against a sea of troubles,</span>
<script>
  $("#target").versify({
    verseSelector: ".line",
    activeClassname: "speaking",
    fromClassname: "beginning",
    toClassname: "end"
  });
</script>

Examples

Examples available on CodePen

Authors and Contributors

By @sammoorhouse. Contributions very welcome under MIT license.

Support or Contact

Questions? Comments? @sammoorhouse.