Search code examples
javascripthtmlcurrent-time

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


I am trying to add a current time / total time element. Something that would look like 01:11/03:00. So far I have the progress bar and play pause button. These are my variables:

var music = document.getElementById('audioPlayer'); // id for audio element
var duration; // Duration of audio clip
var pButton = document.getElementById('pButton'); // play button
var playhead = document.getElementById('playhead'); // playhead
var timeline = document.getElementById('timeline'); // timeline

// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;

This is my audio player elements:

  <audio id="audioPlayer" preload="true" ontimeupdate="initProgressBar()">
        <source src="oh-my.mp3">      
    </audio>
    <div id="wrapper">
        <!--Audio Player Interface-->
        <div id="audioplayer">
            <button id="pButton" class="play"></button>
            <div id="timeline">
                <div class="progress" id="progress"></div>
                <div id="playhead"></div>


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

Link to my fiddle.


Solution

  • 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;
     }

    And it seems to display something like you want? I've just used the answer in the post I've suggested but you can use your variables and your elements instead?