特定区域的Popcornjs循环

Question

我有一个音频，它的文本被重复了两次。

示例：“你好，欢迎使用堆栈溢出。你好，欢迎使用堆栈溢出。”

所以我想，当音频播放时，突出显示在音频上播放的句子。有什么方法可以让popcornjs循环通过文本吗？

例如，我想突出显示文本插入两次的区域。

我试过这样做，但不起作用。

var pop = Popcorn("#greeting");

var wordTimes = {
    "w1": { start: 0.1, end: 1.5 },
    "w2": { start: 1.6, end: 14 },
    "w3": { start: 14, end: 23 },
    "w4": { start: 23, end: 39 },
    "w1": { start: 41, end: 42.4 },
    "w2": { start: 42.6, end: 44 },
    "w3": { start: 45, end: 54 },
    "w4": { start: 55, end: 68 },


};

$.each(wordTimes, function(id, time) {
     pop.footnote({
        start: time.start,
        end: time.end,
        text: '',
        target: id,
        effect: "applyclass",
        applyclass: "selected"
    });
});

Answer 1

当您像这样创建对象wordTimes时

wordTimes = {
    "w1": { start: 0.1, end: 1.5 },
    "w2": { start: 1.6, end: 14 },
    "w3": { start: 14, end: 23 },
    "w4": { start: 23, end: 39 },
    "w1": { start: 41, end: 42.4 },
    "w2": { start: 42.6, end: 44 },
    "w3": { start: 45, end: 54 },
    "w4": { start: 55, end: 68 },
};

你改变了每一次的值，所以你最终

wordTimes.w1: { start: 41, end: 42.4 }
wordTimes.w2: { start: 42.6, end: 44 }
wordTimes.w3: { start: 45, end: 54 }
wordTimes.w4: { start: 55, end: 68 }    

所以只有最后的脚注才会出现

您可以创建像这样的数组，使其具有相同目标的不同元素

var notes = [
    {target: "w1", start: 1, end: 5 },
    {target: "w2", start: 5, end: 10 },
    {target: "w3", start: 10, end: 15 },
    {target: "w1", start: 15, end: 20 },
    {target: "w2", start: 20, end: 25 },
    {target: "w3", start: 25, end: 30 },
];    

然后像这样改变$.each

$.each(notes, function(id, note) {
    p.footnote({
        start: note.start,
        end: note.end,
        text: '',
        target: note.target,//note.target must be a valid id 
        effect: "applyclass",
        applyclass: "selected"
   });
});    

http://jsfiddle.net/JdevM/