使用jQuery/javascript更高效地同步文本和音频？

我一直在使用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");   
}

var currentTime=Math.floor（event.jPlayer.status.currentTime）
如果（当前时间>1）{
$（“#slide1”）.fadeIn（“快速”）；
}否则如果（当前时间<1）{
$（“#slide1”）.fadeOut（“快速”）；
}
如果（currentTime>=9&¤tTime<49）{
$（“#slide2”）.fadeIn（“快速”）；
}否则如果（当前时间<9）{
$（“#slide2”）.fadeOut（“快速”）；
}

等等。这将在适当的时间显示/隐藏div，并允许擦洗。我改编的代码来自。我是一个懂得一点编程的设计师，所以我的技能不是很好，但我了解很多。我正在寻找一种更有效的方法来实现这一点，而不是复制/粘贴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（隐藏的）的代码

var mySlides=[]；
$.ajax({
键入：“获取”，
url:“xml.xml”，
数据类型：“xml”，
成功：parseXml
});
函数解析xml（xml）
{
$（xml）.查找（“幻灯片”）.each（函数（）{
$（“#幻灯片”）.append（“+$（this.attr（“content”）+”）；
});
var$slides=xml.find（'Slide'）；
对于（变量i=0，len=$slides.length；i=mySlides[i].in&¤tTime

我想我真的不知道从这里到哪里才能让演员们现身/隐藏？此外，我还必须找到一种方法来关闭许多div，因为幻灯片实际上是行，而不是完整的幻灯片，所以我需要将它们从舞台上清除（如果您在XML中看到，它将是49秒）。有人能帮忙吗？非常感谢。

---

S

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

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

//设置存储每个标题信息的对象数组
var mySlides=[
{
id:“#slide1”，//将对元素的字符串引用设置为淡入淡出
in:1，//开始时间
out:9999//结束时间（这段时间很长，所以永远不会消失）
},
{
id:“#幻灯片2”，
在：9，
输出：49
}
]，len=mySlides.length；
//循环浏览幻灯片，检查它们是否应该淡入/淡出
对于（变量i=0；i=mySlides[i].in&¤tTime

更新 如果您的XML文件如下所示：

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

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

然后，您可以使用AJAX获取XML文件，并对其数据进行解析，如下所示：

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

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

var mySlides=[]；
$.ajax({
url:'path/to/file.xml'，
键入：“get”，
数据类型：“xml”，
成功：函数（serverResponse）{
var$slides=serverResponse.find（'slide'）；
对于（变量i=0，len=$slides.length；i

在您的页面内容中，我将包含一些JSON（使用Japser的结构，忘记XML），详细说明消息及其输入/输出点

---

然后，在jPlayer的

timeupdate

事件处理程序（每250ms调用一次）中，检查

event.jPlayer.status.currentTime

，并确定当前应该显示来自JSON的消息。

太棒了，感谢您这么快回复我。你知道这会不会对浏览器造成更多/更少的负担，因为可能会有数百个，还有，有没有办法从xml文件中读取这些数据（id/in/out）？@user1183442循环本身不会产生太多开销。我添加了一个更新，其中有一个从XML文件中提取数据的示例。如果您觉得这个答案有帮助，请投赞成票或接受回答票。我似乎不能投赞成票，因为我没有足够的“声誉”。我选择了你的答案作为正确答案！我还没有完全弄明白，但我真的很感谢你的帮助！我添加了一个更新，如果您有更多的输入，我们将不胜感激。您的

for

循环需要两个不同的函数。一个函数用于将XML解析为对象，另一个函数用于在播放视频时更新可见幻灯片。您可以为视频播放器绑定某种类型的

onTime

事件，也可以运行运行第二个函数的间隔来更新当前正在查看的内容。由于您为幻灯片保存的数据以秒为单位（1秒、四十九秒等），因此您可以设置一个间隔，以每秒运行一次，并更新应显示的内容。希望能有帮助。我试着把它们放在两个独立的函数中，但就是不能让它工作。有点超出我的水平。我会继续努力，尽我所能阅读。谢谢你的帮助（上面更新的代码）！s