JSFiddle - React, Tailwind, and code Playground

by sahud

HTML

<div class="container" align="center">
<div class="row">
    <div class="audioku" align="center">
   <audio id="myAud" >
    <source src="http://sahud.mb.student.pens.ac.id/audio/jason%20mraz%20-%20luck.mp3">
    </audio>   <br />
    <div id="progressbar"></div><br>


<div class="row"></div>
<button type="button" class="btn btn-info btn-rounded" onclick="document.getElementById('myAud').play()"><i class="fa fa-play"></i>
</button>


<button type="button" class="btn btn-info btn-rounded" onclick="document.getElementById('myAud').pause()"><i class="fa fa-pause"></i>
</button>


<button type="button" class="btn btn-info btn-rounded" onclick="document.getElementById('myAud').currentTime=0">
<i class="fa fa-stop"></i></button>
<button type="button" class="btn btn-info" id="waktu">00:00</button>
<div id="volume"></div><br>


</div>
</div>
</div>

CSS

.audioku{
  position:relative;
  margin:100px auto;
  padding:20px 20px;
  width:450px;
  font-family:"Times New Roman", Times, serif;
  background:#333333
}

#volume{
  background:#CCCCCC;
  margin:0 0 5px 5px;
  width:150px;
  display:inline-block;

}

#waktu{
  background:#CCCCCC;
  margin:0 0 5px 5px;
  width:50px;
  display:inline-block;

}

#progressbar{
  background: #999999
}


.btn-rounded{
  background: #CCCCCC;
  width:50px;
  height: 50;
  text-align:center;
  font-size:15px;
  border: #666666 solid 5px;
}

JavaScript

$(function() {

  var $aud = $("#myAud"),
      $pp  = $('#waktu'),
      $vol = $('#volume'),
      $bar = $("#progressbar"),
      AUDIO= $aud[0];

  AUDIO.volume = 0.75;
  AUDIO.addEventListener("timeupdate", progress, false);

  function getTime(t) {
    var m=~~(t/60), s=~~(t % 60);
    return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s);
  }

  function progress() {
    $bar.slider('value', ~~(100/AUDIO.duration*AUDIO.currentTime));
    $pp.text(getTime(AUDIO.currentTime));
  }

  $vol.slider( {
    value : AUDIO.volume*100,
    slide : function(ev, ui) {
      $vol.css({background:"hsla(180,"+ui.value+"%,50%,1)"});
      AUDIO.volume = ui.value/100;
    }
  });

  $bar.slider( {
    value : AUDIO.currentTime,
    slide : function(ev, ui) {
      AUDIO.currentTime = AUDIO.duration/100*ui.value;
    }
  });

  $pp.click(function() {
    return AUDIO[AUDIO.paused?'play':'pause']();
  });

});