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" id="container">
      <div class="jumbotron">

        <p><a class="btn btn-lg btn-success" href="#" role="button"  id="play">Play!</a></p>
        <p id="karaoke"><img id='face' src='https://sayersr-public.s3.amazonaws.com/viseme/sil.jpg' width='300'/></p>
        <p id="visemes"></p>




        </div>
        
                                <div class="table-contents">
                           <table id="w517aac13b9c11b9">
                              
                              
                              <tr>
                                 
                                 <th>
                                    <p>IPA</p>
                                 </th>
                                 
                                 <th>
                                    <p>X-SAMPA</p>
                                 </th>
                                 
                                 <th>
                                    <p>Description</p>
                                 </th>
                                 
                                 <th>
                                    <p>Example</p>
                                 </th>
                                 
                                 <th>
                                    <p>Viseme</p>
                                 </th>
                                 
                              </tr>   
                              
                              
                              <tr>                               
                                 
                                 <td colspan="5">
                                    
                                    <p><b>Consonants</b></p>
                                    
                                    
                                 </td>
 ...

JavaScript

var words = [{"time":6,"type":"viseme","value":"t"},
{"time":122,"type":"viseme","value":"a"},
{"time":402,"type":"viseme","value":"i"},
{"time":470,"type":"viseme","value":"s"},
{"time":578,"type":"viseme","value":"T"},
{"time":653,"type":"viseme","value":"@"},
{"time":724,"type":"viseme","value":"t"},
{"time":900,"type":"viseme","value":"a"},
{"time":1103,"type":"viseme","value":"p"},
{"time":1196,"type":"viseme","value":"f"},
{"time":1273,"type":"viseme","value":"O"},
{"time":1340,"type":"viseme","value":"r"},
{"time":1471,"type":"viseme","value":"O"},
{"time":1680,"type":"viseme","value":"t"},
{"time":1809,"type":"viseme","value":"k"},
{"time":1929,"type":"viseme","value":"u"},
{"time":2076,"type":"viseme","value":"t"},
{"time":2159,"type":"viseme","value":"p"},
{"time":2271,"type":"viseme","value":"E"},
{"time":2377,"type":"viseme","value":"t"},
{"time":2457,"type":"viseme","value":"t"},
{"time":2512,"type":"viseme","value":"u"},
{"time":2582,"type":"viseme","value":"k"},
{"time":2727,"type":"viseme","value":"E"},
{"time":2848,"type":"viseme","value":"p"},
{"time":2952,"type":"viseme","value":"t"},
{"time":3054,"type":"viseme","value":"u"},
{"time":3130,"type":"viseme","value":"T"},
{"time":3220,"type":"viseme","value":"i"},
{"time":3351,"type":"viseme","value":"e"},
{"time":3485,"type":"viseme","value":"t"},
{"time":3571,"type":"viseme","value":"@"},
{"time":3605,"type":"viseme","value":"f"},
{"time":3676,"type":"viseme","value":"T"},
{"time":3754,"type":"viseme","value":"@"},
{"time":3796,"type":"viseme","value":"p"},
{"time":3963,"type":"viseme","value":"a"},
{"time":4084,"type":"viseme","value":"r"},
{"time":4177,"type":"viseme","value":"t"},
{"time":4250,"type":"viseme","value":"i"},
{"time":4490,"type":"viseme","value":"sil"}]

function showVisemeAt(viseme, milliseconds) {
  setTimeout(function() {
  	$('#visemes').append(viseme + " ");
  	var num = viseme.charCodeAt(0);
    if (viseme == 'sil') num = 'sil';
    $('#face').attr("src",...