JSFiddle - React, Tailwind, and code Playground

by russau

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<audio id="player"></audio>
<hr>
    <div class="container">
      <div class="header clearfix">
      <div class="jumbotron">

        <p><a class="btn btn-lg btn-success" href="#" role="button"  id="play">Play!</a></p>
        <p id="karaoke"></p>

</div>
      </div>
      </div>

JavaScript

var words = [{
  "time": 6,
  "type": "word",
  "start": 21,
  "end": 24,
  "value": "Now"
}, {
  "time": 320,
  "type": "word",
  "start": 25,
  "end": 27,
  "value": "is"
}, {
  "time": 540,
  "type": "word",
  "start": 28,
  "end": 31,
  "value": "the"
}, {
  "time": 660,
  "type": "word",
  "start": 32,
  "end": 36,
  "value": "time"
}, {
  "time": 996,
  "type": "word",
  "start": 37,
  "end": 40,
  "value": "for"
}, {
  "time": 1262,
  "type": "word",
  "start": 41,
  "end": 44,
  "value": "all"
}, {
  "time": 1492,
  "type": "word",
  "start": 45,
  "end": 49,
  "value": "good"
}, {
  "time": 1803,
  "type": "word",
  "start": 50,
  "end": 53,
  "value": "men"
}, {
  "time": 2062,
  "type": "word",
  "start": 54,
  "end": 56,
  "value": "to"
}, {
  "time": 2182,
  "type": "word",
  "start": 57,
  "end": 61,
  "value": "come"
}, {
  "time": 2465,
  "type": "word",
  "start": 62,
  "end": 64,
  "value": "to"
}, {
  "time": 2614,
  "type": "word",
  "start": 65,
  "end": 68,
  "value": "the"
}, {
  "time": 2815,
  "type": "word",
  "start": 69,
  "end": 72,
  "value": "aid"
}, {
  "time": 3016,
  "type": "word",
  "start": 73,
  "end": 75,
  "value": "of"
}, {
  "time": 3145,
  "type": "word",
  "start": 76,
  "end": 79,
  "value": "the"
}, {
  "time": 3199,
  "type": "word",
  "start": 80,
  "end": 85,
  "value": "party"
}]

function writeWordAt(word, milliseconds) {
  setTimeout(function() {
    $('#karaoke').append(word + ' ');
  }, milliseconds);
}



$(function() {
  var player = document.getElementById('player');
  player.src = 'https://sayersr-public.s3.amazonaws.com/test.mp3';

	$('#play').click(function() {
    player.play();
  });
  player.addEventListener("playing", function() {
    for (var i in words) {
      var word = words[i].value;
      var time = words[i].time;
      writeWordAt(word, time);
    }
  }, true);
});