I have an audio that has a text that is repeated twice.
Example:" Hello, and welcome to Stack Overflow. Hello, and welcome to Stack Overflow."
So I want to, as the audio plays, highlight the sentence that was played on the audio. Is there a way that I can make the popcornjs loop through the text?
For instance I would like to highlight the area where the text is inserted into twice
I tried doing this, but it doesnt work.
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"
});
});
when you create the object wordTimes like this
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 },
};
you are changing the values of each of the times so you end up with
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 }
so only the last footnotes will appear
you can create instead a Array like this to have different elements with the same target
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 },
];
and change the $.each like this
$.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"
});
});