JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  press play watch captions change! or use buttons to jump to times!
</p>
<audio controls>
    <source src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg" type="audio/ogg"/>
</audio>
<br>

<div id="buttons"></div>
<input id="caps" type="text" name="caps" value="caps appear here"/>

CSS

#caps { 
  padding: .5rem; 
  font-size: 2rem;
}

JavaScript

var captions = {
  3: "caption at 3!",
	4: "A cap at time 4", 
  5: "5 sec caption!",
  6: "time 6! ganggang!",
  7: "that good shit!"
};
var myaudio = document.getElementsByTagName("audio")[0];
var t = myaudio.currentTime;

myaudio.ontimeupdate = function() {showCap()};

// add buttons
var divButtons = document.getElementById("buttons");
captions.forEach(function addButton(t){
    divButtons.innerHTML += '<button onclick="GoToTime('+ t +');">'+ CapTitle(t) +'</button>';
})

for (var i = captions.first; i < captions.last; i++) {
  var html = '<button onclick="GoToTime('+ i +');">'+ CapTitle(i) +'</button>';
  div.innerHTML =+ 'bla';
}
function GoToTime(t){
  myaudio.currentTime = t;
  if (t in captions) {
  	$('#caps').val(captions[t])
  }
}
function showCap(){  
	var rt = Math.round(myaudio.currentTime);
  if (rt in captions) {
    	$('#caps').val(captions[rt]) 
  }
}
function CapTitle(t){
  if (t in captions) {
  	$('#caps').val(captions[t])
  }
}