One of Beverley's Audio Players - Add Time

[KennyP]

The CSS yes, but not the HTML. I would appreciate it if you would please show me how to do it.

[Deadweight]

I am not sure where you want it so here is an example. If you did say also I am tired. It is 3:30am for me but here is the HTML and JS combined.

HTML:

<div id="audioplayer">
	<div id="toggle-wrap" class="play">
		<button id="toggle"></button>
	</div>
	<div class="timeline-wrap">
		<div id="timeline">
			<div id="playhead" style="margin-left: 48.0126px;"></div>
  		</div>
	<div id="timeline-timedisplay"></div>
    </div>
</div>

JAVASCRIPT:

music.ontimeupdate = function() {$('#timeline-timedisplay').html(Math.ceil(music.currentTime) + ' / ' + Math.ceil(music.duration));};

I will be heading to bed in a few also.

[KennyP]

Thanks! I appreciate your help very much. I'll try to impement it now and I'll get back to you tomorrow with the results.

Thanks again!

[KennyP]

Thanks again for the help. The time display works great! Below is a screenshot of it on the audioplayer.

Regarding the time format though, I think it would be better if the display would add zeros until 100 is reached. So, instead of 1/190, the display would be 001/190.

2 leading zeros would be added from 1 to 9 seconds, and 1 leading zero would be added from 10 to 99 seconds.

How is it added in the javascript ?

JAVASCRIPT:

music.ontimeupdate = function() {$('#timeline-timedisplay').html(Math.ceil(music.currentTime) + ' / ' + Math.ceil(music.duration));};

[Deadweight]

Please take a look at:
https://developer.mozilla.org/en-US/...tring/padStart

Shouldn't be too hard to understand and is good for learning. What's that old saying...
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime."

[KennyP]

Thanks. Using padding as in the article, I couldn't figure out how to transition from using 2 zeros going from 1 to 9 and then using 1 zero going from 10 to 99.

In any case, I decided to leave that behind because I think it's easier for a user to see a minute / seconds format, 1.15 / 1:90, but after struggling with it for hours, why
is this not working?

 music.ontimeupdate = function(){
    $('$tracktime').html('width', music.currentTime / music.duration * 100 + '%')
  }
})

[Deadweight]

Did you combine that one to this one?

music.ontimeupdate = function() {$('#timeline-timedisplay').html(Math.ceil(music.currentTime) + ' / ' + Math.ceil(music.duration));};

EG

 music.ontimeupdate = function(){
    $('$tracktime').html('width', music.currentTime / music.duration * 100 + '%');
    $('#timeline-timedisplay').html(Math.ceil(music.currentTime) + ' / ' + Math.ceil(music.duration));
  }

[KennyP]

Yes, but it didn't work. I tried it as below, and it still doesn't work:

 music.ontimeupdate = function(){
    $('$tracktime').html('width', music.currentTime / music.duration * 100 + '%');
    $('#tracktime').html(Math.ceil(music.currentTime) + ' / ' + Math.ceil(music.duration));
  }

[Deadweight]

Please check my code again. Second thing selector is wrong.

... $('#timeline-timedisplay')

[KennyP]

Sorry, I should have mentioned sooner that I had changed the selector from '#timeline-timedisplay' to '#tracktime'
So, I continued using it to be consistent:

<audio id="music" preload="auto">
	<source src="<?php echo $fname; ?>"/>
</audio>

<div id="audioplayer">
	<div id="toggle-wrap" class="play">
		<button id="toggle"></button>
	</div>
	<div class="timeline-wrap">
		<div id="timeline">
			<div id="playhead"></div>
  		</div>
	<div id="tracktime"></div>
    </div>
</div>

I tried the code again - unfortunately, it doesn't work.