JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<header>
    <audio src="http://cs5073.userapi.com/u17629666/audios/c9c08680bf52.mp3" id="audio" controls></audio>
    <input type="range" step="any" id="seekbar"></input>
  
    <p id=time>
     
    </p>

</header>

JavaScript

var audio = document.getElementById("audio");

    var seekbar = document.getElementById('seekbar');
    function setupSeekbar() {
      seekbar.min = audio.startTime;
      seekbar.max = audio.startTime + audio.duration;
    }
    audio.ondurationchange = setupSeekbar;

    function seekAudio() {
      audio.currentTime = seekbar.value;
    }

    function updateUI() {
      var lastBuffered = audio.buffered.end(audio.buffered.length-1);
      seekbar.min = audio.startTime;
      seekbar.max = lastBuffered;
      seekbar.value = audio.currentTime;
      var s = parseInt(audio.currentTime % 60);
      var m = parseInt((audio.currentTime / 60) % 60); 
      if (m < 10) m = '0' + m; 
      if (s < 10) s = '0' + s;
      document.getElementById('time').innerHTML = m + ':' + s ;
    }

    seekbar.onchange = seekAudio;
    audio.ontimeupdate = updateUI;


    audio.addEventListener('durationchange', setupSeekbar);
    audio.addEventListener('timeupdate', updateUI);