How do I show the current time and total length of custom audio player?

Question

I currently have a well working audio player, although I'm wondering how I can show the current songs total duration and current song, Example: 02:52/04:23. Here is a link to what I have so far: Link To Custom Audio Player. These are all my variables, classes, and id's:

        <!--HTML5 audio-->
    <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>

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;

Nathan Hawks · Answer 1 · 2020-01-01T02:48:49.450

0

Easy peasy. In DOM, the audio object has a duration attribute.

alert( document.getElementById( 'audioPlayer' ).duration );

So, for your project:

var duration = music.duration;

Since you got NaN on the first try, you may need to wrap it in an event:

music.ondurationchange( function() {
  duration = document.getElementById('audioPlayer').duration;
  console.log(duration);
  // other code such as updating the player
});

edited Jan 01 '20 at 02:48

answered Jan 01 '20 at 02:10

Nathan Hawks

557
4
14

this worked although it just has an alert when I refresh the page saying Nan, how to I style this and log it. – coder123 Jan 01 '20 at 02:17
I just updated the code to this: `ocument.addEventListener("DOMContentLoaded", function(event) { var duration = music.duration; var music = document.getElementById('audioPlayer'); // id for audio element var pButton = document.getElementById('pButton'); // play button var playhead = document.getElementById('playhead'); // playhead var timeline = document.getElementById('timeline'); // timeline music.ondurationchange( function() { duration = document.getElementById('audioPlayer').duration; console.log(duration);` – coder123 Jan 01 '20 at 02:55
Now the play/pause button won't work and I'm not able to see the duration. Is there something I am missing? – coder123 Jan 01 '20 at 02:57
You may need to [make a fiddle out of it](http://www.jsfiddle.net) in order to make it readable – Nathan Hawks Jan 01 '20 at 02:58
[https://jsfiddle.net/tunechest000/ufj1cy67/3/#&togetherjs=tpDmB9CzF6] Though the songs are not loaded either is the plat/pause image, how to I load them or are you able to view what you need? – coder123 Jan 01 '20 at 03:04
1

Well it's not very useful for diagnostic purposes if you don't set it up as close to working order as possible. You can give it remote URLs like `http://example.com/the.mp3` and same for the images. – Nathan Hawks Jan 01 '20 at 03:09

How do I show the current time and total length of custom audio player?

1 Answers1