<audio id="audiofile" src="//pathtoyouraudiofile.mp3" controls></audio><br>
<div id="subtitles"></div>
<script>
( function(win, doc) {
var audioPlayer = doc.getElementById("audiofile")
var subtitles = doc.getElementById("subtitles")
var syncData = [
{ "end": "0.225","start": "0.125","text": "There" },
{"end": "0.485","start": "0.225","text": "were" },
/* ... and so on ... full json is in the demo */
]
createSubtitle()
function createSubtitle()
{
var element
for (var i = 0
element = doc.createElement('span')
element.setAttribute("id", "c_" + i)
element.innerText = syncData[i].text + " "
subtitles.appendChild(element)
}
}
audioPlayer.addEventListener("timeupdate", function(e){
syncData.forEach(function(element, index, array){
if( audioPlayer.currentTime >= element.start && audioPlayer.currentTime <= element.end )
subtitles.children[index].style.background = 'yellow'
})
})
}(window, document))
</script>