Home Dynamically generate the Time and Decimal point format for audio in html5
Reply: 1

Dynamically generate the Time and Decimal point format for audio in html5

W9914420
1#
W9914420 Published in 2018-02-11 21:18:22Z

I have created a very simple audio player that plays a small mp3 file.

It works and functions has accepted but I would like to make the generation of the current Time of the audio more dynamic in that it generates both decimal and minute position placements (if needed) during the audio playback.

currently I have a function that converts an audio.mp3 current time into minutes, seconds and milliseconds.

this.format = function () {
    let secsCal = Math.floor(this.audio.currentTime % 60);
    let minsCal = Math.floor(this.audio.currentTime / 60);
    let millsCal = this.audio.currentTime % 60;

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




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

Now this does work for me however it is not the best solution since the time will show you the minute value even though this particular example is not a minute long. So ideally we would only want to display mins and secs if the audio warrants them.

what I am trying to achieve is:

  1. Only display the decimal point if the audio is longer than a second
  2. Only display the : if the audio sample is actually longer than a minute.

I have been searching for a solution, If anyone can help that would be most helpful

please find below my example

Audio HTML5 example

W9914420
2#
W9914420 Reply to 2018-02-18 13:05:06Z

So After a bit of soul searching, the answer to the question was relatively straight forward here is the code that makes the changes.

   // only display 00:00.00 formats if the mp3 requires it

   if (minutes === 0 ) {
   minResult = '\u00a0';
   } else {
   minResult = minutes + ':';
   }
   if (seconds === 0 ) {
   secResult = '\u00a0';
   } else {
   secResult = seconds + '.';
   }
   if (millisecondsCal === 0 ) {
   millResult = '\u00a0';
   } else {
   millResult = milliseconds;
   }

   // append value to dom
   document.getElementById("duration").innerHTML = minResult + secResult + millResult;

So how this works is by first checking that we do not have any values that equate to 0, because if we do, then we don't want to display the corresponding time format, otherwise show us.

Obviously this is more of a UI request that just gives the impression that the player knows how long the track is and only displays secs and mins accordingly.

This method is placed in both the format and duration methods. see below for further details.

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);
  
  console.log(seconds);
  
  // create empty vars to store values
  var minResult = '';
  var secResult = '';
  var millResult = '';
  
   // only display 00:00.00 formats if the mp3 requires it
  if (minutes === 0 ) {
  minResult = '\u00a0';
  } else {
   minResult = minutes + ':';
  }
   if (seconds === 0 ) {
  secResult = '\u00a0';
  } else {
   secResult = seconds + '.';
  }
   if (millisecondsCal === 0 ) {
  millResult = '\u00a0';
  } else {
   millResult = milliseconds;
  }

  // append value to dom
  document.getElementById("duration").innerHTML = minResult + secResult + millResult;
}

// 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);
  
  // create empty vars to store values
  var minResult = '';
  var secResult = '';
  var millResult = '';
  
  // only display 00:00.00 formats if the mp3 requires it
  if (minsCal === 0 ) {
  minResult = '\u00a0';
  } else {
   minResult = mins + ':';
  }
   if (secsCal === 0 ) {
  secResult = '\u00a0';
  } else {
   secResult = secs + '.';
  }
   if (millsCal === 0 ) {
  millResult = '\u00a0';
  } else {
   millResult = mills;
  }

  document.getElementById("start-time").innerHTML = minResult + secResult + millResult;
}

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


audio.onplay = function() {
  requestAnimationFrame(audio.onplay);
  update();
  };
  
  audio.onpause = function() {
  cancelAnimationFrame(audio.onplay);
  };
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;
}
  <button id=pButton>Play</button>
  <p id="start-time" class="time"></p>
 <p id="duration" class="time">00:00</p>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.318102 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO