Syncing text and audio with jQuery/javascript, more efficiently?

Question

I've been syncing some text with audio, using jPlayer and jQuery's .fadeIn/.fadeOut. It works as expected, using these if statements:

var currentTime = Math.floor(event.jPlayer.status.currentTime)

if (currentTime > 1){
    $("#slide1").fadeIn("fast");             
} else if (currentTime < 1){
    $("#slide1").fadeOut("fast"); 
}

if (currentTime >= 9 && currentTime < 49){
    $("#slide2").fadeIn("fast"); 
} else if (currentTime < 9){
    $("#slide2").fadeOut("fast");   
}

and so on. This will show/hide div's at the proper time and allow for scrubbing. The code I have adapted is from here. I am a designer who knows a little programming, so my skills aren't great but I understand a lot. I'm looking for a more efficient way to do this, instead of copy/pasting the if statement as there will be A LOT of them. Possibly an array of all the in/out times? I'm not sure how to do it.

Best case scenario would be to have an xml list of times control prebuilt divs (I think anyway). Any ideas on how to do it?

Thanks for your time, S

Update

Ok, I've made some progress, but am having problems with the XML/loop. I have added content to the XML and have it dynamically generating divs. Here is the xml:

<?xml version="1.0" encoding="utf-8" ?>
<Slides>
<Slide id="#slide1" in="1" out="9999" content="Implications"></Slide>
<Slide id="#slide2" in="9" out="49" content="Implications have the form"></Slide>
<Slide id="#slide3" in="11" out="49" content="If A is true, then B is true."></Slide>
</Slides>

and here is my code that creates the divs (that are hidden)

<script>
var mySlides = [];
$.ajax({
    type: "GET",
    url: "xml.xml",
    dataType: "xml",
    success: parseXml
});
function parseXml(xml)
{
    $(xml).find("Slide").each(function() {
        $("#slides").append("<div class=\"starthidden\" id=" + $(this).attr("id") + ">" + $(this).attr("content") + "</div>");
    });
    var $slides = xml.find('Slide');
    for (var i = 0, len = $slides.length; i < len; i++) {
        mySlides[mySlides.length] = {
            in  : $slides.eq(i).attr('in'),
            out : $slides.eq(i).attr('out')
        };
    }
}
$("#audio").bind($.jPlayer.event.timeupdate, function(event) { 
    var currentTime = Math.floor(event.jPlayer.status.currentTime)
    for (var i = 0; i < len; i++) {
        if (currentTime >= mySlides[i].in && currentTime < mySlides[i].out) {
            $(mySlides[i].id).fadeIn("fast");
        } else if (currentTime < mySlides[i].in) {
            $(mySlides[i].id).fadeOut("fast");
        }
    }   
});
</script>

I guess I just don't really know where to go from here to get the divs to show/hide now? As well, I've got to figure out a way to turn many divs off as well, as slides are actually lines, not full slides so I need to clear them off the stage (if you see in the XML, it would be at 49sec). Can anyone help? Thanks so much. S

Answer 1

You can setup an array of objects that store information for each slide.

//setup an array of objects that store information for each caption
var mySlides = [
        {
            id  : '#slide1',//set a string reference to the element to fade
            in  : 1,//start time
            out : 9999//end time (this is long so it doesn't fade out ever)
        },
        {
            id  : '#slide2',
            in  : 9,
            out : 49
        }
    ], len = mySlides.length;

//loop through the slides to check if they should be faded in/out
for (var i = 0; i < len; i++) {
    if (currentTime >= mySlides[i].in && currentTime < mySlides[i].out) {
        $(mySlides[i].id).fadeIn("fast");
    } else if (currentTime < mySlides[i].in) {
        $(mySlides[i].id).fadeOut("fast");
    }
}

Update

If your XML file is something like this:

<slides>
    <slide id="#slide1" in="1" out="9999"></slide>
    <slide id="#slide2" in="9" out="49"></slide>
</slides>

Then you can grab the XML file using AJAX and parse it for it's data like this:

var mySlides = [];
$.ajax({
    url      : 'path/to/file.xml',
    type     : 'get',
    dataType : 'xml',
    success  : function (serverResponse) {
        var $slides = serverResponse.find('slide');
        for (var i = 0, len = $slides.length; i < len; i++) {
            mySlides[mySlides.length] = {
                id  : $slides.eq(i).attr('id'),
                in  : $slides.eq(i).attr('in'),
                out : $slides.eq(i).attr('out')
            };
        }
    }
});