Just a quick post before I find a movie to stream on Netflix and ride out my Sunday …
So, I've been working a tad on SAVS, aka the "Simple Audio/Verse Synchronizer". And the changes really have to do with the data model for the timed text and for the backend/technical requirements. It's now all done with HTML, CSS, and JavaScript – as it should be.
First, the data model for a line of timed text in what I'm calling "st2" or "SAVS timed text" is now like this:
<span
class="savs-st2"
data-startTime="10"
data-stopTime="13">My mistress' eyes are nothing like the sun
</span>
Before, it was much clunkier, like this:
<p onclick="seekTo(10)" id="1">
<span class="savs-text">My mistress' eyes are nothing like the sun</span>
<span class="savs-time">10</span>
</p>
That's to say, now – using the HTML5 "data-" attribute – the demands for the HTML markup are far fewer given that the JavsScript file "savs.js" takes care of more.
Before, with the older mark up model, there was no support for a stop time value and one also had to take the responsibility for adding several attributes related to calling JavaScript functions and for creating "id" attributes for both the corresponding <audio> or <video> element as well as for the timed text, etc.
I actually have thought about doing this as a jQuery plugin, but I'm not sure I see the point. Simply including the "savs.js" file is easier. By editing the "savs.css" file, one can control the look of their page. But I digress …
Now that the data model is different and the JavaScript file does more, one can generate a "SAVS compliant" HTML doc with whatever they want.
See, before I was thinking I'd write a PHP script that would build the page, etc, etc. but then I realized that "No, that's not my job." People should be able to store their timed data however they want, generate their HTML however they want, and only have to use the "savs.js" file and the "st2" data model to get this to work.
Sort of.
One also needs to give their HTML5 <audio> or <video> element an id of "savs-player" and also needs to put a tag somewhere in their HTML doc with an id of "savs-caption" a la:
<span class="savs-caption"></span>
That's where the captions go and it's currently required. If someone doesn't want to display captions, then they can just use CSS to hide that element.
Anyway, I'm not explaining anything well since I'm in a rush to watch a movie and have a soda, so here's the latest demo and below is the original version shown via a screencast.
SAVS: a Simple Audio/Verse Synchronizer from nitin arora on Vimeo.
--------------