Html5 Audio format

audio current time

by Master P

HTML

<button id=pButton>Play</button>
  <p id="start-time" class="time"></p>
 <p id="duration" class="time">00:00</p>

CSS

body {
  background-color:black;
}

#pButton{
 
  background-color: #424242;
  border: 2px solid #bdbdbd;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  font-size: 25px;
  color:  #bdbdbd;
  float:left;
  outline:none;
  position: relative;
  cursor: pointer;
  padding:20px;
}

#duration,
#start-time{ 
     padding: 20px;
     float: left;
}

.time {
    font-size: 20px;
    color: black;
    position: relative;
    top: 0px;
 
  min-width: 60px;
}

JavaScript

const audio = document.createElement("AUDIO");
audio.setAttribute("id", "audio");
audio.src = "http://www.hscripts.com/tutorials/html/music.wav";
audio.controls = true;
audio.onloadedmetadata = function() {
  document.getElementById("duration").style.color = "#bdbdbd";
  document.getElementById("start-time").style.color = "white";
  
  
  
  
  // buttons
  document.getElementById("pButton").addEventListener("click", function (){
  
   // Toggle audio play
  audio[audio.paused ? "play" : "pause"]();
  
  });

  // Convert duration into HH:MM:SS
  duration(audio.duration);
  
};





// function converts audio.duration to SS:mm format
function duration(time) {
  var minutes = parseInt(time / 60, 10);
  var seconds = parseInt(time % 60);
  var millisecondsCal = time % 60;
  var milliseconds = ("0" + millisecondsCal).substr(4, 2);

  // append value to dom
  document.getElementById("duration").innerHTML = seconds + "." + milliseconds;
}

// convert audio.currentTime to SS:mm format
function format() {
  var secsCal = Math.floor(audio.currentTime % 60);
  var minsCal = Math.floor(audio.currentTime / 60);
  var millsCal = audio.currentTime % 60;

  var secs = ("0" + secsCal).substr(-2);
  var mins = ("0" + minsCal).substr(-2);
  var mills = ("0" + millsCal).substr(4, 2);

  document.getElementById("start-time").innerHTML = mins + ':' + secs + "." + mills;
}

var update = function () {
  
  format();
  
}


audio.onplay = function() {
  requestAnimationFrame(audio.onplay);
  update();
  };
  
  audio.onpause = function() {
  cancelAnimationFrame(audio.onplay);
  };