javascript - Popcornjs loop in specific area -

javascript - Popcornjs loop in specific area -

i have sound has text repeated twice.

example:" hello, , welcome stack overflow. hello, , welcome stack overflow."

so want to, sound plays, highlight sentence played on audio. there way can create popcornjs loop through text?

for instance highlight area text inserted twice

i tried doing this, 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 create object 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 }, };

you changing values of each of times end

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 lastly footnotes appear can create instead array have different elements 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 alter $.each

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

http://jsfiddle.net/jdevm/

javascript popcornjs