SO jQuery Fiddle

Test Fiddle mainly for SO Questions jQuery 1.4.3, UI 1.8.5

by Shital Agarwal

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/ui-lightness/jquery-ui.css">
<div id="transcript">
    <h3>Transcript</h3>
    <p class="tran">
        <span tag="ID_1" data-start="0" data-end="6">transcript line #1</span>
        <span tag="ID_2" data-start="6" data-end="9"> transcript line #2</span>
    </p>
</div>

CSS

.current { color: red; }

JavaScript

var lines = document.getElementById("transcript").getElementsByTagName("span"); 
var now = 5;

for (var i = 0, l = lines.length; i < l; i++) {
  if (now >= +lines[i].getAttribute("data-start") && 
      now <= +lines[i].getAttribute("data-end")) {
    lines[i].className = "current";
  } else {
    lines[i].className = "";
  }
}