Master
Cylinder

HTML5 Audio Text Sync

42

I put together a demo of HTML5 audio synchronized with changes in text classes. Cueing the audio by clicking along the progress bar, you'll see the color of the text change to reflect who in the recording is speaking. Conversely if you click different phrases in the text, you'll see the change in the progress bar. I chose to make William Faulkner dark blue and the questioning student green. The rest of the students are represented in light gray. The timing was adjusted to jump to the phrase half a second before hearing it.

The recording is part of an online archive free to the public at the University of Virginia Library.