A good first step, I thought, would be to replicate the audio/text synchronized player from the current Oral History web site. This site uses Flash for the player. Let’s see if we can take Flash out of the picture by using HTML5.
The first port of call is the audio tag: http://www.w3schools.com/html5/tag_audio.asp
Here (if you have Firefox or Chrome) you’ll see it in action (that’s my daughter, Sophia’s song BTW, so proud):
I added an event listener to the audio tag: v.addEventListener(‘timeupdate’, checkTime);
The browser takes care of firing that event about every 1/4 of a second. The checkTime function then will then autoscroll the audio player to the appropriate time stamp using scrollIntoView (thanks Steve!).
The user can move the play head of the audio player by clicking on a time stamp within the transcript. That functionality is brought to you by the audio tags currentTime method. e.g. audioElement.currentTime = timeStamp;
So, so far so good. I only have it working in Chrome right now. Here it is..