JSFiddle - React, Tailwind, and code Playground

by lonewolfs

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<audio id="greeting" src="http://dl.dropbox.com/u/17154625/greeting.ogg" controls></audio>

<div id="text">
   <span id="w1" class="word" data-start="1.0">Hello</span>,
<span id="w2" class="word" data-start="2.0">welcome</span>
  <span id="w3" class="word" data-start="3.0">Here</span>.
   
</div>

CSS

.word {
   color: red;
}
.word:hover, .word.selected {
    color: blue;
    cursor: pointer;
}

JavaScript

var pop = Popcorn("#greeting");

var wordTimes = {
    "w1": { start: 1, end: 1.5 },
    "w2": { start: 1.9, end: 2.5 },
    "w3": { start: 3, end: 4 }
};

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

pop.play();

$('.word').click(function() {
    var audio = $('#greeting');
    audio[0].currentTime = parseFloat($(this).data('start'), 10);
    audio[0].play();
});