JSFiddle - React, Tailwind, and code Playground

by Renilson Meneguci

HTML

<button id="play" name="play"> Play </button>
<button id="pause" name="pause"> Pause </button>
<progress id="seekbar" value="0" max="1" style="width:200px;"></progress>
<audio class="audioDemo" controls="" preload="none" id="player"> 
                <source src="http://demo.codesamplez.com/audio/pitbull.mp3" type="audio/mpeg">
                <source src="http://demo.codesamplez.com/audio/music.ogg" type="audio/ogg">
            </audio>

JavaScript

$(document).ready(function(){
  $('#play').on('click', function() {
    document.getElementById('player').play();
  });

  $('#pause').on('click', function() {
    document.getElementById('player').pause();
  });

  $('#player').on('timeupdate', function() {
    $('#seekbar').attr("value", this.currentTime / this.duration);
  });
});