javascript - Popcornjs 在特定区域循环

Question

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

示例:“您好，欢迎来到 Stack Overflow。您好，欢迎来到 Stack Overflow。”

所以我想在音频播放时突出显示音频中播放的句子。有没有办法让 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/