Цикл 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 }    

поэтому появятся только последние сноски
вместо этого вы можете создать Array, чтобы иметь разные элементы с одинаковой целью

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/