JSFiddle - React, Tailwind, and code Playground

by threisdd

HTML

<button id="button">play</button>
<table>
  <tr>
    <td id="dump1"></td>
    <td id="dump2"></td>
  </tr>
</table>
<div>
</div>
<audio id="audio" src="http://techslides.com/demos/samples/sample.m4a"></audio>

CSS

#dump1, #dump2 {
    display: inline-block;
    float: left;
    width: 100px;  
    border-bottom: 1px solid black;
}

#dump1 {
  color: darkgray;
}

#dump2 {
}

JavaScript

var button = document.getElementById('button');
var audio = document.getElementById('audio');
var dump1 = document.getElementById('dump1');
var dump2 = document.getElementById('dump2');

var START = 1;
var OFFSET = 0.3;

button.addEventListener('click', play);
audio.addEventListener('timeupdate', check);

var rafId = null;
function loop() {
	log(dump2, audio.currentTime);
	rafId = requestAnimationFrame(loop);
}

function log(place, value) {
	place.innerHTML += '<div>' + value + '</div>';
}

function play() {
	dump1.innerHTML = '';
  dump2.innerHTML = '';
  try {
  	audio.currentTime = START;
    loop();
    audio.play()
 		.catch(function (e) {
      alert(e);
    });
  } catch(e) {
    alert(e);
  }
}

function check() {
	log(dump1, audio.currentTime);
	if (audio.currentTime > (START + OFFSET)) {
  	audio.pause();
    cancelAnimationFrame(rafId);
  }
}