【问题标题】：Syncing text and audio with jQuery/javascript, more efficiently?使用 jQuery/javascript 更有效地同步文本和音频？
【发布时间】：2012-02-01 19:06:20
【问题描述】：

我一直在使用 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 语句，因为会有很多。可能是所有进出时间的数组？我不知道该怎么做。

最好的情况是有一个时间控制预建 div 的 xml 列表（我认为无论如何）。关于如何做的任何想法？

感谢您的宝贵时间， 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 现在显示/隐藏？同样，我还必须想办法关闭许多 div，因为 slides 实际上是线条，而不是完整的幻灯片，所以我需要清除它们阶段（如果您在 XML 中看到，它将是 49 秒）。任何人都可以帮忙吗？非常感谢。 S

【问题讨论】：

标签： java jquery audio sync jplayer

【解决方案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')
            };
        }
    }
});

【讨论】：

太棒了，感谢您这么快回复我。你知道这是否会对浏览器产生更多/更少的负担，因为会有可能数百个，还有，有没有办法从 xml 文件中读取这些数据（id/in/out）？
@user1183442 循环本身不会产生太多开销。我添加了一个 update 示例，其中包含从 XML 文件中提取数据的示例。如果您发现此答案有帮助，我们将不胜感激。
我似乎无法投票，因为我没有足够的“声誉”。我选择了你的答案作为正确答案！我还没有完全弄清楚，但我真的很感谢你的帮助！我添加了一个更新，如果您有更多的意见，将不胜感激。
您的for 循环需要有两个不同的函数。一个函数将 XML 解析为一个对象，另一个函数用于在播放视频时更新可见幻灯片。您可以为您的视频播放器绑定某种类型的onTime 事件，或者只运行一个运行第二个函数的间隔来更新当前正在查看的内容。由于您为幻灯片保存的数据以秒为单位（一秒、四十九秒等），您只需设置一个间隔以每秒运行一次并更新应该可见的内容。希望对您有所帮助。
我尝试将它们放在 2 个单独的函数中，但无法正常工作。有点超出我的水平。我会继续尝试并阅读我能阅读的内容。感谢您的帮助（上面更新了代码）！ S

【解决方案2】：

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

然后，在 jPlayer 的 timeupdate 事件（每 250 毫秒调用一次）的处理程序中，检查 event.jPlayer.status.currentTime 并确定当前应该显示来自 JSON 的哪条消息。

【讨论】：