java - 使用 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 并允许擦洗。我改编的代码来自here 。我是一名设计师，懂一点编程，所以我的技术不是很好，但我了解很多。我正在寻找一种更有效的方法来做到这一点，而不是复制/粘贴 if 语句，因为会有很多这样的语句。可能是所有进/出时间的数组？我不知道该怎么做。

最好的情况是有一个 xml 时间控制预建 div 列表(我认为无论如何)。关于如何做到这一点有什么想法吗？

感谢您的宝贵时间，

更新

好的，我已经取得了一些进展，但是 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 现在显示/隐藏？另外，我还必须找到一种方法来关闭许多 div，因为幻灯片实际上是线条，而不是完整的幻灯片，所以我需要清除它们阶段(如果您在 XML 中看到，则为 49 秒)。有人可以帮忙吗？非常感谢。

Answer 1

您可以设置一个对象数组来存储每张幻灯片的信息。

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

然后您可以使用 AJAX 获取 XML 文件并解析它的数据，如下所示:

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