Синхронизировать текст и аудио с помощью jQuery / javascript, более эффективно?

Question

Я синхронизировал текст со звуком, используя jPlayer и jQuery .fadeIn / .fadeOut. Он работает, как и ожидалось, используя эти операторы if:

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");   
}

и так далее. Это покажет / спрятать div в нужное время и позволит очистить. Код, который я адаптировал, взят из здесь . Я дизайнер, который немного разбирается в программировании, поэтому мои навыки невелики, но я много понимаю Я ищу более эффективный способ сделать это, вместо копирования / вставки оператора if, так как их будет МНОГО. Возможно, массив всех времен входа / выхода? Я не уверен, как это сделать.

В лучшем случае было бы иметь список времени xml управления предварительно собранными div (я думаю, в любом случае). Есть идеи как это сделать?

Спасибо за ваше время, S

Обновление

Хорошо, я добился определенного прогресса, но у меня проблемы с циклом XML /. Я добавил контент в XML и он динамически генерирует div. Вот 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>

и вот мой код, который создает div (которые скрыты)

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

Полагаю, я просто не знаю, куда идти отсюда, чтобы получить div, чтобы показать / спрятать сейчас? Кроме того, я должен найти способ отключить многие деления, так как слайды на самом деле строки, а не полные слайды, поэтому мне нужно убрать их со сцены (если вы видите в XML, это будет в 49 секунд). Кто-нибудь может помочь? Спасибо. S

Answer 1

к содержанию вашей страницы я бы добавил JSON (используя структуру Japser, забудьте XML) с подробным описанием сообщений и их точек входа / выхода.

затем в обработчик для события jPlayer timeupdate (называемогокаждые 250 мс), проверьте event.jPlayer.status.currentTime и определите, какое сообщение из вашего JSON должно отображаться в данный момент.

Answer 2

Вы можете установить массив объектов, в которых хранится информация для каждого слайда.

//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");
    }
}

Обновление

Если ваш XML-файл выглядит примерно так:

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

Затем вы можете получить XML-файл, используя AJAX, и проанализировать его на наличие данных:

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')
            };
        }
    }
});