Html5 Display Audio Currenttime

html5 display audio currentTime

Here's an example:

<audio id="track" src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg"
       ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
    <p>Your browser does not support the audio element</p>
</audio>
<span id="tracktime">0 / 0</span>
<button onclick="document.getElementById('track').play();">Play</button>

This should work in Firefox and Chrome, for other browsers you'll probably need to add alternative encodings.

How to set the currentTime in HTML5 audio object when audio file is online?

I found a solution to my problem, if not exactly an explanation.

My hosting provider uses a CDN, for which it must replace resource's URLs with those of a different domain. The URLs of my audio resources are dynamically constructed by JS, because there's a random element to them; as such, the deployment process that replaces URLs wasn't catching those for my audio files. To get around this, I manually excluded the audio files from the CDN, meaning I could refer to them using relative file paths.

This was how things stood when I was having this issue.

Then, due to a separate issue, I took a different approach: I got the audio files back on the CDN and wrote a function to extract the domain name I needed to use to retrieve the files. When I did that, suddenly I found that all my problems to do with setting currentTime had disappeared. Somehow, not having the files on the CDN was severely interfering with the browser's ability to load them in an orderly manner.

If anyone can volunteer an explanation for why this might have been, I'd be very curious to hear it...

Edit

I've been working on another project which involves streaming audio, this time also with PWA support, so I had to implement a caching mechanism in my service worker for audio files. Through this guide I learned all about the pitfalls of range requests, and understand now that failing to serve correct responses to requests with range headers will break seeking on some browsers.

It seems that in the above case, when I excluded my files from the CDN they were served from somewhere that didn't support range headers. When I moved them back on the CDN this was fixed, as it must have been built with explicit support for streaming media.

Here is a good explanation of correct responses to range requests. But for anyone having this issue while using a third party hosting service, it suffices to know that probably they do not support range headers for streaming media. If you want to verify this is the case, you can query the audio object's duration. At least in Safari's case, the duration is set to infinity when it can't successfully make a range request, and at that point seeking will be disabled.

Javascript/HTML5: get current time of audio tag

you can try like this

<audio id="track" src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg"
       ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
    <p>Your browser does not support the audio element</p>
</audio>
<span id="tracktime">0 / 0</span>
<button onclick="document.getElementById('track').play();">Play</button>

or in javascript you can do this

<audio id='audioTrack' ontimeupdate='updateTrackTime(this);'>
  Audio tag not supported in this browser</audio>
<script>
function updateTrackTime(track){
  var currTimeDiv = document.getElementById('currentTime');
  var durationDiv = document.getElementById('duration');

  var currTime = Math.floor(track.currentTime).toString(); 
  var duration = Math.floor(track.duration).toString();

  currTimeDiv.innerHTML = formatSecondsAsTime(currTime);

  if (isNaN(duration)){
    durationDiv.innerHTML = '00:00';
  } 
  else{
    durationDiv.innerHTML = formatSecondsAsTime(duration);
  }
}
</script>

I am currently getting time out of javascript

How to format HTML5 audio's currentTime property with Javascript

That may help you, I used that:

  function formatTime(seconds) {
    minutes = Math.floor(seconds / 60);
    minutes = (minutes >= 10) ? minutes : "0" + minutes;
    seconds = Math.floor(seconds % 60);
    seconds = (seconds >= 10) ? seconds : "0" + seconds;
    return minutes + ":" + seconds;
  }

HTML5: How to get currentTime and duration of Audio Tag in milliseconds

You can use:

<audio id="track" controls>
  <source src="your.mp3" type="audio/mpeg">
  <source src="your.ogg" type="audio/ogg">
</audio> 
<script type="text/javascript">
var audio = document.getElementById('track');
audio.addEventListener('timeupdate',function(){
    var currentTimeMs = audio.currentTime*1000;
    console.log(currentTimeMs);
},false);
</script>

You can read here for more information on the precision of the timeupdate event. It is dependent on the browser implementation so keep in mind you will get different results from a browser/device to another.

You should use addEventListener method rather than the ontimeupdate property - it is more maintainable.

Also if you need browser coverage it is good to use both ogg and mp3 audio files as sources.

Parsing and showing HTML audio current time with javascript

Working edited CodePen

Just needed a little math! JS below:

var update = setInterval(function() {
      var mins = Math.floor(audio.currentTime / 60);
      var secs = Math.floor(audio.currentTime % 60);
      if (secs < 10) {
        secs = '0' + String(secs);
      }
      timer.innerHTML = mins + ':' + secs;
    }, 10);

How to get current time HH:MM:SS in Audio element?

//// get current time 
myPlayer.addEventListener("timeupdate", function(){
    myRange.value  = myPlayer.currentTime;
    tt = "0";
    var Amin = Math.floor(myPlayer.currentTime/60);

    var Asec = Math.floor(myPlayer.currentTime - Amin * 60);

    if(Asec < 10){
        Asec = "0" + Asec;
    }
    if(Amin > 10){
        tt="";
    }
    currenttime.innerHTML = tt+Amin+":"+Asec;
});

How to get the played time from HTML5 audio player?

Use currentTime to get the current timestamp, e.g.:

var audio = document.getElementById("audio-element");
document.getElementById('capture').addEventListener('click', () => {    console.log(audio.currentTime);});

<audio id="audio-element" controls>  <source src="https://hpr.dogphilosophy.net/test/flac.flac" type="audio/flac"></audio><br /><button id="capture">  Click here to get the current played time</button>

How do you add the current time / total time to custom audio player?

In your fiddle, I have added:

<span id="tracktime">0:00 / 0:00</span>
in the <div id="audioplayer"> element (interface).

I have also replaced the ontimeupdate function of the <audio> element with:

ontimeupdate="updateTracktime()"
where the function updateTracktime() is defined like below:

function updateTracktime(){  let audioPlayer = document.getElementById("audioPlayer");  var counter = Math.round(Math.floor(audioPlayer.currentTime)/60)+":"+Math.floor(audioPlayer.currentTime-Math.round(Math.floor(audioPlayer.currentTime)/60))+"/"+Math.round(Math.floor(audioPlayer.duration)/60)+":"+Math.floor(audioPlayer.duration-Math.round(Math.floor(audioPlayer.duration)/60));  document.getElementById('tracktime').innerHTML = counter; }

Getting HTML5 audio currentTime and duration into Python

I solved this issue. What I did was use javascript to obtain the currentTime of the html audio file upon click of a button and pass the value to a hidden html input field on a flask form. Then on another button click I submit the value to Python. I'm sure this solution is specific to my application, but I'm happy to answer questions if others have trouble.

---

Related Topics