less is more, a SAVS update

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:

    data-stopTime="13">My mistress' eyes are nothing like the sun

Before, it was much clunkier:

  <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>

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.


Related Content:


  1. verdefeliz

    Hi, I just bumped into your solution and it looks great. Your savs.js file states it is MIT license, but prompts to contact you before using the code. Can it be used freely for both personal and commercial projects? I'm working on one that requires showing a transcript of the audio at all times. Thank you.

    1. nitin (Post author)


      Yes, feel free to use it for personal and commercial projects. If you use it for something, I'd love to see the project when it's done.

      The reason I ask people to contact me first is mainly so you know that it's really a demo, isn't actively maintained, and with Chrome – while it works – the Chrome mouse cursor keeps blinking. This could be a Chrome bug, but's it's something to know about.




Leave a Comment

Your email address will not be published. Required fields are marked *