JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>
  <audio id="myAudio" src="http://jPlayer.org/tmp/countdown.mp3"></audio>
<button type="button" data-start="18" data-stop="19">0</button>
<button type="button" data-start="16" data-stop="17">1</button>
<button type="button" data-start="14" data-stop="15">2</button>
<button type="button" data-start="12" data-stop="13">3</button>
<button type="button" data-start="10" data-stop="11">4</button>
<button type="button" data-start="8" data-stop="9">5</button>
<button type="button" data-start="6" data-stop="7">6</button>
<button type="button" data-start="4" data-stop="5">7</button>
<button type="button" data-start="2" data-stop="3">8</button>
<button type="button" data-start="0" data-stop="1">9</button>
<script>
var myAudio = document.getElementById('myAudio');
var buttons = document.getElementsByTagName('button');
var stopTime = 0;

for (var i = 0; i < buttons.length; i++) {
  buttons[i].onclick = function() {
    myAudio.currentTime = this.getAttribute("data-start");
    stopTime = this.getAttribute("data-stop");
    myAudio.play();
  };
}

myAudio.addEventListener('timeupdate', function() {
  if (this.currentTime > stopTime) {
    this.pause();
  }
}, false);

</script>
</body>
</html>