After my last post where I was whining about getting traction for an idea for an alternative visualization of oral history data I decided I’d just stop whining and use it as an opportunity to look into HTML5 multimedia capabilities. It’s also an opportunity to build upon my woefully bad Javascript skills.
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):
Next I used ColdFusion (gotta love CF!) to fetch the transcript of the interview from the database. So easy with CF. The transcript is divided into segments with a starting time stamp, and the text of that section of the interview. Once CF has fetched all the segments I parse the query results into a global Javascript array.
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..